Skip to content

Commit 4eedc55

Browse files
aweellaweell
committed
Include new spacing tokens
1 parent e200a8e commit 4eedc55

14 files changed

Lines changed: 1051 additions & 21 deletions

‎tokens/blau.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3353,6 +3353,83 @@
33533353
}
33543354
}
33553355
},
3356+
"spacing": {
3357+
"buttonDefaultPadding": {
3358+
"value": {
3359+
"x": {
3360+
"mobile": 16,
3361+
"desktop": 16
3362+
}
3363+
},
3364+
"type": "spacing"
3365+
},
3366+
"buttonSmallPadding": {
3367+
"value": {
3368+
"x": {
3369+
"mobile": 12,
3370+
"desktop": 12
3371+
}
3372+
},
3373+
"type": "spacing"
3374+
},
3375+
"cardDefaultPadding": {
3376+
"value": {
3377+
"mobile": 16,
3378+
"desktop": 24
3379+
},
3380+
"type": "spacing"
3381+
},
3382+
"inputPadding": {
3383+
"value": {
3384+
"y": {
3385+
"desktop": 8
3386+
}
3387+
},
3388+
"type": "spacing"
3389+
},
3390+
"tagPadding": {
3391+
"value": {
3392+
"y": {
3393+
"mobile": 4,
3394+
"desktop": 4
3395+
}
3396+
},
3397+
"type": "spacing"
3398+
},
3399+
"feedbackScreenPadding": {
3400+
"value": {
3401+
"desktop": 64
3402+
},
3403+
"type": "spacing"
3404+
},
3405+
"heroPadding": {
3406+
"value": {
3407+
"y": {
3408+
"mobile": 24
3409+
}
3410+
},
3411+
"type": "spacing"
3412+
},
3413+
"headerPadding": {
3414+
"value": {
3415+
"y": {
3416+
"mobile": 24
3417+
}
3418+
},
3419+
"type": "spacing"
3420+
},
3421+
"drawerPadding": {
3422+
"value": {
3423+
"top": {
3424+
"desktop": 40
3425+
},
3426+
"x": {
3427+
"desktop": 40
3428+
}
3429+
},
3430+
"type": "spacing"
3431+
}
3432+
},
33563433
"componentProperties": {
33573434
"dismissActionType": {
33583435
"value": "neutral",

‎tokens/esimflag.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3375,6 +3375,83 @@
33753375
}
33763376
}
33773377
},
3378+
"spacing": {
3379+
"buttonDefaultPadding": {
3380+
"value": {
3381+
"x": {
3382+
"mobile": 16,
3383+
"desktop": 16
3384+
}
3385+
},
3386+
"type": "spacing"
3387+
},
3388+
"buttonSmallPadding": {
3389+
"value": {
3390+
"x": {
3391+
"mobile": 12,
3392+
"desktop": 12
3393+
}
3394+
},
3395+
"type": "spacing"
3396+
},
3397+
"cardDefaultPadding": {
3398+
"value": {
3399+
"mobile": 16,
3400+
"desktop": 24
3401+
},
3402+
"type": "spacing"
3403+
},
3404+
"inputPadding": {
3405+
"value": {
3406+
"y": {
3407+
"desktop": 8
3408+
}
3409+
},
3410+
"type": "spacing"
3411+
},
3412+
"tagPadding": {
3413+
"value": {
3414+
"y": {
3415+
"mobile": 4,
3416+
"desktop": 4
3417+
}
3418+
},
3419+
"type": "spacing"
3420+
},
3421+
"feedbackScreenPadding": {
3422+
"value": {
3423+
"desktop": 64
3424+
},
3425+
"type": "spacing"
3426+
},
3427+
"heroPadding": {
3428+
"value": {
3429+
"y": {
3430+
"mobile": 24
3431+
}
3432+
},
3433+
"type": "spacing"
3434+
},
3435+
"headerPadding": {
3436+
"value": {
3437+
"y": {
3438+
"mobile": 24
3439+
}
3440+
},
3441+
"type": "spacing"
3442+
},
3443+
"drawerPadding": {
3444+
"value": {
3445+
"top": {
3446+
"desktop": 40
3447+
},
3448+
"x": {
3449+
"desktop": 40
3450+
}
3451+
},
3452+
"type": "spacing"
3453+
}
3454+
},
33783455
"themeVariant": {
33793456
"successFeedback": {
33803457
"value": "inverse",

‎tokens/figma/utils/constants.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const VARIABLE_SCOPES = {
2929
FONT_FAMILY: "FONT_FAMILY",
3030
TEXT_CONTENT: "TEXT_CONTENT",
3131
WIDTH_HEIGHT: "WIDTH_HEIGHT",
32+
GAP: "GAP",
3233
};
3334

3435
export const BRANDS = {

‎tokens/figma/utils/extract-json-data.mjs‎

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,72 @@ export const extractSkinJsonData = (
363363
};
364364
});
365365

366+
const spacingArray = Object.keys(
367+
parsedContent.spacing
368+
).flatMap((key) => {
369+
const value =
370+
parsedContent.spacing[key].value;
371+
const result = [];
372+
373+
// Helper to capitalize axis/side and append to token name
374+
const capitalize = (str) =>
375+
str.charAt(0).toUpperCase() +
376+
str.slice(1);
377+
378+
// Push all breakpoints for a given axis or side
379+
const pushBreakpoints = (
380+
axisOrSide,
381+
breakpoints
382+
) => {
383+
Object.keys(breakpoints).forEach(
384+
(breakpoint) => {
385+
// Build Figma-friendly name
386+
const figmaName = axisOrSide
387+
? `${key}${capitalize(axisOrSide)}`
388+
: key;
389+
390+
result.push({
391+
name: `spacing/${breakpoint}/${figmaName}`,
392+
value: Number(
393+
breakpoints[breakpoint]
394+
),
395+
});
396+
}
397+
);
398+
};
399+
400+
// CASE 1 — scalar (all sides or gap)
401+
if (
402+
typeof value === "object" &&
403+
value !== null &&
404+
!("x" in value) &&
405+
!("y" in value) &&
406+
!("top" in value)
407+
) {
408+
pushBreakpoints(null, value);
409+
return result;
410+
}
411+
412+
// CASE 2 — axis-based (x / y)
413+
if ("x" in value || "y" in value) {
414+
if (value.x)
415+
pushBreakpoints("x", value.x);
416+
if (value.y)
417+
pushBreakpoints("y", value.y);
418+
return result;
419+
}
420+
421+
// CASE 3 — side-based (top / right / bottom / left)
422+
["top", "right", "bottom", "left"].forEach(
423+
(side) => {
424+
if (value[side])
425+
pushBreakpoints(side, value[side]);
426+
}
427+
);
428+
429+
return result;
430+
});
431+
366432
// Accumulate results
367433
accumulator[fileName] = {
368434
light: processColors(
@@ -380,6 +446,7 @@ export const extractSkinJsonData = (
380446
fontWeight: fontWeightArray,
381447
fontSize: fontSizeArray,
382448
lineHeight: lineHeightArray,
449+
spacing: spacingArray,
383450
};
384451

385452
return accumulator;
@@ -760,6 +827,72 @@ export const extractMiddlewareJsonData = (
760827
};
761828
});
762829

830+
const spacingArray = Object.keys(
831+
parsedContent.spacing
832+
).flatMap((key) => {
833+
const value =
834+
parsedContent.spacing[key].value;
835+
const result = [];
836+
837+
// Helper to capitalize axis/side and append to token name
838+
const capitalize = (str) =>
839+
str.charAt(0).toUpperCase() +
840+
str.slice(1);
841+
842+
// Push all breakpoints for a given axis or side
843+
const pushBreakpoints = (
844+
axisOrSide,
845+
breakpoints
846+
) => {
847+
Object.keys(breakpoints).forEach(
848+
(breakpoint) => {
849+
// Figma-friendly name: append axis/side
850+
const figmaName = axisOrSide
851+
? `${key}${capitalize(axisOrSide)}`
852+
: key;
853+
854+
result.push({
855+
name: `spacing/${breakpoint}/${figmaName}`,
856+
value: Number(
857+
breakpoints[breakpoint]
858+
),
859+
});
860+
}
861+
);
862+
};
863+
864+
// CASE 1 — scalar (all sides / gap)
865+
if (
866+
typeof value === "object" &&
867+
value !== null &&
868+
!("x" in value) &&
869+
!("y" in value) &&
870+
!("top" in value)
871+
) {
872+
pushBreakpoints(null, value);
873+
return result;
874+
}
875+
876+
// CASE 2 — axis-based (x / y)
877+
if ("x" in value || "y" in value) {
878+
if (value.x)
879+
pushBreakpoints("x", value.x);
880+
if (value.y)
881+
pushBreakpoints("y", value.y);
882+
return result;
883+
}
884+
885+
// CASE 3 — side-based (top / right / bottom / left)
886+
["top", "right", "bottom", "left"].forEach(
887+
(side) => {
888+
if (value[side])
889+
pushBreakpoints(side, value[side]);
890+
}
891+
);
892+
893+
return result;
894+
});
895+
763896
const themeVariantArray = Object.keys(
764897
parsedContent.themeVariant
765898
).map((key) => ({
@@ -773,7 +906,8 @@ export const extractMiddlewareJsonData = (
773906
).map((key) => ({
774907
name: `componentProperties/${key}`,
775908
value:
776-
parsedContent.componentProperties[key].value,
909+
parsedContent.componentProperties[key]
910+
.value,
777911
}));
778912

779913
// Accumulate results
@@ -793,8 +927,10 @@ export const extractMiddlewareJsonData = (
793927
fontWeight: fontWeightArray,
794928
fontSize: fontSizeArray,
795929
lineHeight: lineHeightArray,
930+
spacing: spacingArray,
796931
themeVariant: themeVariantArray,
797-
componentProperties: componentPropertiesArray,
932+
componentProperties:
933+
componentPropertiesArray,
798934
};
799935

800936
return accumulator;

‎tokens/figma/variables.mjs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,16 @@ export const getNonColorVariables = (
118118
],
119119
hasAlias: false,
120120
},
121+
{
122+
variables: jsonData[brand]?.spacing || [],
123+
collectionName: COLLECTION_NAMES.SKIN,
124+
resolvedType: VARIABLE_TYPES.FLOAT,
125+
variableScopes: [
126+
VARIABLE_SCOPES.WIDTH_HEIGHT,
127+
VARIABLE_SCOPES.GAP,
128+
],
129+
hasAlias: false,
130+
},
121131
{
122132
variables:
123133
jsonData[brand]?.themeVariant || [],

0 commit comments

Comments
 (0)