Skip to content

Commit 0c98cd3

Browse files
Copilotlukasoppermann
Copilot
and
lukasoppermann
committed
Fix dimension format in all remaining files and update Figma formatter
Co-authored-by: lukasoppermann <[email protected]>
1 parent d91c7af commit 0c98cd3

File tree

6 files changed

+256
-232
lines changed

6 files changed

+256
-232
lines changed

‎src/formats/jsonFigma.ts‎

Lines changed: 34 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 that can be either string (legacy) or object (new format)
11+
type DimensionValue = string | { 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,40 @@ 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+
let numValue: number;
51+
52+
if (typeof dimValue === 'string') {
53+
// Legacy string format like "1px"
54+
numValue = parseInt(dimValue.replace('px', ''));
55+
} else if (typeof dimValue === 'object' && dimValue.value !== undefined) {
56+
// New object format like {value: 1, unit: "px"}
57+
numValue = dimValue.value;
58+
} else {
59+
throw new Error(`Invalid dimension value for ${property}: ${JSON.stringify(dimValue)}`);
60+
}
61+
62+
return {
63+
name: `${name}/${property}`,
64+
value: numValue,
65+
type: 'FLOAT',
66+
scopes: ['EFFECT_FLOAT'],
67+
mode,
68+
collection,
69+
group,
70+
};
71+
}
4872

4973
const {attributes} = token
5074
const {mode, collection, group} = attributes || {}

‎src/tokens/component/avatar.json5‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343
{
4444
color: '{base.color.neutral.0}',
4545
alpha: 0.8,
46-
offsetX: '0px',
47-
offsetY: '0px',
48-
blur: '0px',
49-
spread: '2px',
46+
offsetX: { value: 0, unit: 'px' },
47+
offsetY: { value: 0, unit: 'px' },
48+
blur: { value: 0, unit: 'px' },
49+
spread: { value: 2, unit: 'px' },
5050
},
5151
],
5252
$type: 'shadow',
@@ -61,10 +61,10 @@
6161
{
6262
color: '{base.color.neutral.1}',
6363
alpha: 1,
64-
offsetX: '0px',
65-
offsetY: '0px',
66-
blur: '0px',
67-
spread: '2px',
64+
offsetX: { value: 0, unit: 'px' },
65+
offsetY: { value: 0, unit: 'px' },
66+
blur: { value: 0, unit: 'px' },
67+
spread: { value: 2, unit: 'px' },
6868
},
6969
],
7070
},

‎src/tokens/component/button.json5‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,10 @@
142142
{
143143
color: '{base.color.neutral.13}',
144144
alpha: 0.04,
145-
offsetX: '0px',
146-
offsetY: '1px',
147-
blur: '0px',
148-
spread: '0px',
145+
offsetX: { value: 0, unit: 'px' },
146+
offsetY: { value: 1, unit: 'px' },
147+
blur: { value: 0, unit: 'px' },
148+
spread: { value: 0, unit: 'px' },
149149
inset: false,
150150
},
151151
],
@@ -161,10 +161,10 @@
161161
{
162162
color: '{base.color.transparent}',
163163
alpha: 0,
164-
offsetX: '0px',
165-
offsetY: '0px',
166-
blur: '0px',
167-
spread: '0px',
164+
offsetX: { value: 0, unit: 'px' },
165+
offsetY: { value: 0, unit: 'px' },
166+
blur: { value: 0, unit: 'px' },
167+
spread: { value: 0, unit: 'px' },
168168
inset: false,
169169
},
170170
],
@@ -485,10 +485,10 @@
485485
{
486486
color: '{base.color.green.9}',
487487
alpha: 0.3,
488-
offsetX: '0px',
489-
offsetY: '1px',
490-
blur: '0px',
491-
spread: '0px',
488+
offsetX: { value: 0, unit: 'px' },
489+
offsetY: { value: 1, unit: 'px' },
490+
blur: { value: 0, unit: 'px' },
491+
spread: { value: 0, unit: 'px' },
492492
inset: true,
493493
},
494494
],
@@ -504,10 +504,10 @@
504504
{
505505
color: '{base.color.blue.9}',
506506
alpha: 0.3,
507-
offsetX: '0px',
508-
offsetY: '1px',
509-
blur: '0px',
510-
spread: '0px',
507+
offsetX: { value: 0, unit: 'px' },
508+
offsetY: { value: 1, unit: 'px' },
509+
blur: { value: 0, unit: 'px' },
510+
spread: { value: 0, unit: 'px' },
511511
inset: true,
512512
},
513513
],
@@ -517,10 +517,10 @@
517517
{
518518
color: '{base.color.blue.9}',
519519
alpha: 0.3,
520-
offsetX: '0px',
521-
offsetY: '1px',
522-
blur: '0px',
523-
spread: '0px',
520+
offsetX: { value: 0, unit: 'px' },
521+
offsetY: { value: 1, unit: 'px' },
522+
blur: { value: 0, unit: 'px' },
523+
spread: { value: 0, unit: 'px' },
524524
inset: true,
525525
},
526526
],
@@ -530,10 +530,10 @@
530530
{
531531
color: '{base.color.transparent}',
532532
alpha: 0,
533-
offsetX: '0px',
534-
offsetY: '0px',
535-
blur: '0px',
536-
spread: '0px',
533+
offsetX: { value: 0, unit: 'px' },
534+
offsetY: { value: 0, unit: 'px' },
535+
blur: { value: 0, unit: 'px' },
536+
spread: { value: 0, unit: 'px' },
537537
inset: false,
538538
},
539539
],
@@ -988,10 +988,10 @@
988988
{
989989
color: '{base.color.blue.9}',
990990
alpha: 0.2,
991-
offsetX: '0px',
992-
offsetY: '1px',
993-
blur: '0px',
994-
spread: '0px',
991+
offsetX: { value: 0, unit: 'px' },
992+
offsetY: { value: 1, unit: 'px' },
993+
blur: { value: 0, unit: 'px' },
994+
spread: { value: 0, unit: 'px' },
995995
inset: true,
996996
},
997997
],
@@ -1007,10 +1007,10 @@
10071007
{
10081008
color: '{base.color.transparent}',
10091009
alpha: 0,
1010-
offsetX: '0px',
1011-
offsetY: '0px',
1012-
blur: '0px',
1013-
spread: '0px',
1010+
offsetX: { value: 0, unit: 'px' },
1011+
offsetY: { value: 0, unit: 'px' },
1012+
blur: { value: 0, unit: 'px' },
1013+
spread: { value: 0, unit: 'px' },
10141014
inset: false,
10151015
},
10161016
],
@@ -1299,10 +1299,10 @@
12991299
{
13001300
color: '{base.color.red.9}',
13011301
alpha: 0.2,
1302-
offsetX: '0px',
1303-
offsetY: '1px',
1304-
blur: '0px',
1305-
spread: '0px',
1302+
offsetX: { value: 0, unit: 'px' },
1303+
offsetY: { value: 1, unit: 'px' },
1304+
blur: { value: 0, unit: 'px' },
1305+
spread: { value: 0, unit: 'px' },
13061306
inset: true,
13071307
},
13081308
],
@@ -1318,10 +1318,10 @@
13181318
{
13191319
color: '{base.color.orange.9}',
13201320
alpha: 0.2,
1321-
offsetX: '0px',
1322-
offsetY: '1px',
1323-
blur: '0px',
1324-
spread: '0px',
1321+
offsetX: { value: 0, unit: 'px' },
1322+
offsetY: { value: 1, unit: 'px' },
1323+
blur: { value: 0, unit: 'px' },
1324+
spread: { value: 0, unit: 'px' },
13251325
inset: true,
13261326
},
13271327
],
@@ -1331,10 +1331,10 @@
13311331
{
13321332
color: '{base.color.transparent}',
13331333
alpha: 0,
1334-
offsetX: '0px',
1335-
offsetY: '0px',
1336-
blur: '0px',
1337-
spread: '0px',
1334+
offsetX: { value: 0, unit: 'px' },
1335+
offsetY: { value: 0, unit: 'px' },
1336+
blur: { value: 0, unit: 'px' },
1337+
spread: { value: 0, unit: 'px' },
13381338
inset: false,
13391339
},
13401340
],

‎src/tokens/functional/border/border.json5‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
$value: {
55
color: '{focus.outlineColor}',
66
style: 'solid',
7-
width: '2px',
7+
width: { value: 2, unit: 'px' },
88
},
99
$type: 'border',
1010
},

0 commit comments

Comments
 (0)