Skip to content

Commit d64c0a4

Browse files
aweellaweell
authored
New spacing tokens (#2516)
* Include new spacing tokens * Fix multiple variable generation from single token * Remove axis case from token definition * Avoid single breakpoint values in spacing tokens * Change feedbackScreen to use all sides * Update cardDefault padding token structure
1 parent c664da3 commit d64c0a4

14 files changed

Lines changed: 1689 additions & 21 deletions

‎tokens/blau.json‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3353,6 +3353,149 @@
33533353
}
33543354
}
33553355
},
3356+
"spacing": {
3357+
"buttonDefaultPadding": {
3358+
"value": {
3359+
"left": {
3360+
"mobile": 16,
3361+
"desktop": 16
3362+
},
3363+
"right": {
3364+
"mobile": 16,
3365+
"desktop": 16
3366+
}
3367+
},
3368+
"type": "spacing"
3369+
},
3370+
"buttonSmallPadding": {
3371+
"value": {
3372+
"left": {
3373+
"mobile": 12,
3374+
"desktop": 12
3375+
},
3376+
"right": {
3377+
"mobile": 12,
3378+
"desktop": 12
3379+
}
3380+
},
3381+
"type": "spacing"
3382+
},
3383+
"cardDefaultPadding": {
3384+
"value": {
3385+
"top": {
3386+
"mobile": 16,
3387+
"desktop": 24
3388+
},
3389+
"bottom": {
3390+
"mobile": 16,
3391+
"desktop": 24
3392+
},
3393+
"left": {
3394+
"mobile": 16,
3395+
"desktop": 24
3396+
},
3397+
"right": {
3398+
"mobile": 16,
3399+
"desktop": 24
3400+
}
3401+
},
3402+
"type": "spacing"
3403+
},
3404+
"inputPadding": {
3405+
"value": {
3406+
"top": {
3407+
"mobile": 18,
3408+
"desktop": 8
3409+
},
3410+
"bottom": {
3411+
"mobile": 18,
3412+
"desktop": 8
3413+
}
3414+
},
3415+
"type": "spacing"
3416+
},
3417+
"tagPadding": {
3418+
"value": {
3419+
"top": {
3420+
"mobile": 4,
3421+
"desktop": 4
3422+
},
3423+
"bottom": {
3424+
"mobile": 4,
3425+
"desktop": 4
3426+
}
3427+
},
3428+
"type": "spacing"
3429+
},
3430+
"feedbackScreenPadding": {
3431+
"value": {
3432+
"top": {
3433+
"mobile": 64,
3434+
"desktop": 64
3435+
},
3436+
"bottom": {
3437+
"mobile": 16,
3438+
"desktop": 64
3439+
},
3440+
"left": {
3441+
"mobile": 16,
3442+
"desktop": 64
3443+
},
3444+
"right": {
3445+
"mobile": 16,
3446+
"desktop": 64
3447+
}
3448+
},
3449+
"type": "spacing"
3450+
},
3451+
"heroPadding": {
3452+
"value": {
3453+
"top": {
3454+
"mobile": 24,
3455+
"desktop": 56
3456+
},
3457+
"bottom": {
3458+
"mobile": 24,
3459+
"desktop": 56
3460+
}
3461+
},
3462+
"type": "spacing"
3463+
},
3464+
"headerPadding": {
3465+
"value": {
3466+
"top": {
3467+
"mobile": 24,
3468+
"desktop": 48
3469+
},
3470+
"bottom": {
3471+
"mobile": 24,
3472+
"desktop": 48
3473+
}
3474+
},
3475+
"type": "spacing"
3476+
},
3477+
"drawerPadding": {
3478+
"value": {
3479+
"top": {
3480+
"mobile": 40,
3481+
"desktop": 40
3482+
},
3483+
"bottom": {
3484+
"mobile": 16,
3485+
"desktop": 24
3486+
},
3487+
"left": {
3488+
"mobile": 16,
3489+
"desktop": 40
3490+
},
3491+
"right": {
3492+
"mobile": 16,
3493+
"desktop": 40
3494+
}
3495+
},
3496+
"type": "spacing"
3497+
}
3498+
},
33563499
"componentProperties": {
33573500
"dismissActionType": {
33583501
"value": "neutral",

‎tokens/esimflag.json‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3375,6 +3375,149 @@
33753375
}
33763376
}
33773377
},
3378+
"spacing": {
3379+
"buttonDefaultPadding": {
3380+
"value": {
3381+
"left": {
3382+
"mobile": 16,
3383+
"desktop": 16
3384+
},
3385+
"right": {
3386+
"mobile": 16,
3387+
"desktop": 16
3388+
}
3389+
},
3390+
"type": "spacing"
3391+
},
3392+
"buttonSmallPadding": {
3393+
"value": {
3394+
"left": {
3395+
"mobile": 12,
3396+
"desktop": 12
3397+
},
3398+
"right": {
3399+
"mobile": 12,
3400+
"desktop": 12
3401+
}
3402+
},
3403+
"type": "spacing"
3404+
},
3405+
"cardDefaultPadding": {
3406+
"value": {
3407+
"top": {
3408+
"mobile": 16,
3409+
"desktop": 24
3410+
},
3411+
"bottom": {
3412+
"mobile": 16,
3413+
"desktop": 24
3414+
},
3415+
"left": {
3416+
"mobile": 16,
3417+
"desktop": 24
3418+
},
3419+
"right": {
3420+
"mobile": 16,
3421+
"desktop": 24
3422+
}
3423+
},
3424+
"type": "spacing"
3425+
},
3426+
"inputPadding": {
3427+
"value": {
3428+
"top": {
3429+
"mobile": 18,
3430+
"desktop": 8
3431+
},
3432+
"bottom": {
3433+
"mobile": 18,
3434+
"desktop": 8
3435+
}
3436+
},
3437+
"type": "spacing"
3438+
},
3439+
"tagPadding": {
3440+
"value": {
3441+
"top": {
3442+
"mobile": 4,
3443+
"desktop": 4
3444+
},
3445+
"bottom": {
3446+
"mobile": 4,
3447+
"desktop": 4
3448+
}
3449+
},
3450+
"type": "spacing"
3451+
},
3452+
"feedbackScreenPadding": {
3453+
"value": {
3454+
"top": {
3455+
"mobile": 64,
3456+
"desktop": 64
3457+
},
3458+
"bottom": {
3459+
"mobile": 16,
3460+
"desktop": 64
3461+
},
3462+
"left": {
3463+
"mobile": 16,
3464+
"desktop": 64
3465+
},
3466+
"right": {
3467+
"mobile": 16,
3468+
"desktop": 64
3469+
}
3470+
},
3471+
"type": "spacing"
3472+
},
3473+
"heroPadding": {
3474+
"value": {
3475+
"top": {
3476+
"mobile": 24,
3477+
"desktop": 56
3478+
},
3479+
"bottom": {
3480+
"mobile": 24,
3481+
"desktop": 56
3482+
}
3483+
},
3484+
"type": "spacing"
3485+
},
3486+
"headerPadding": {
3487+
"value": {
3488+
"top": {
3489+
"mobile": 24,
3490+
"desktop": 48
3491+
},
3492+
"bottom": {
3493+
"mobile": 24,
3494+
"desktop": 48
3495+
}
3496+
},
3497+
"type": "spacing"
3498+
},
3499+
"drawerPadding": {
3500+
"value": {
3501+
"top": {
3502+
"mobile": 40,
3503+
"desktop": 40
3504+
},
3505+
"bottom": {
3506+
"mobile": 16,
3507+
"desktop": 24
3508+
},
3509+
"left": {
3510+
"mobile": 16,
3511+
"desktop": 40
3512+
},
3513+
"right": {
3514+
"mobile": 16,
3515+
"desktop": 40
3516+
}
3517+
},
3518+
"type": "spacing"
3519+
}
3520+
},
33783521
"themeVariant": {
33793522
"successFeedback": {
33803523
"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 = {

0 commit comments

Comments
 (0)