Skip to content

Commit 8fce49b

Browse files
larserbachlarserbach
committed
feat(tokens): tabs squash merged
* fix(tokens): changes value for action.md.label * feat(tokens): adds color height and opacity for Navigation.TabBar.Tab.HighlightLine * feat: adds first tab tokens refactors highLightLine * feat(tokens): adds contentRow padding and itemSpacing * feat(tokens): adds tab spacings for MD and LG * feat(tokens): adds tab color * feat(tokens): adds configtokens for tabs * feat(tokens): tabs icon sizing and size variant * feat(tokens): adds padding for tabBar ButtonWrapper
1 parent 65d8b21 commit 8fce49b

File tree

3 files changed

+249
-1
lines changed

3 files changed

+249
-1
lines changed

‎packages/figma-design-tokens/input/tokens/intermediary/quasi.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,12 @@
216216
"error": {
217217
"value": "{core.color.crimson.500.solid}",
218218
"type": "color"
219+
},
220+
"brand": {
221+
"rest": {
222+
"value": "{q.surface.brand.primary.rest}",
223+
"type": "color"
224+
}
219225
}
220226
},
221227
"onreadonly": {

‎packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3218,5 +3218,247 @@
32183218
"type": "border"
32193219
}
32203220
}
3221+
},
3222+
"Navigation": {
3223+
"TabBar": {
3224+
"Tab": {
3225+
"SM": {
3226+
"HighlightLine": {
3227+
"Height": {
3228+
"value": "{core.dimensionPX.2}",
3229+
"type": "sizing",
3230+
"description": "Defines the thickness of the highlight line.\nApply on <HighlightLine>"
3231+
}
3232+
},
3233+
"ContentCol": {
3234+
"TopPadding": {
3235+
"value": "{core.dimensionREM.4}",
3236+
"type": "spacing",
3237+
"description": "Defines the topPadding of a tab; Apply on <ContentCol>"
3238+
},
3239+
"ItemSpacing": {
3240+
"value": "{core.dimensionREM.8}",
3241+
"type": "spacing",
3242+
"description": "Defines the gap beteen the tabs label/icon and the <HighlightLIne>"
3243+
}
3244+
},
3245+
"ContentRow": {
3246+
"PaddingLeftRight": {
3247+
"value": "{core.dimensionPX.12}",
3248+
"type": "spacing",
3249+
"description": "Defines the padding left and right of <ContentRow>"
3250+
},
3251+
"ItemSpacing": {
3252+
"value": "{core.dimensionPX.2}",
3253+
"type": "spacing",
3254+
"description": "Defines the gap between the icon and the label of a tab. Apply on <ContentRow>"
3255+
}
3256+
},
3257+
"Icon": {
3258+
"Sizing": {
3259+
"value": "{core.dimensionREM.12}",
3260+
"type": "sizing",
3261+
"description": "Defines height and width of the icon of a tab"
3262+
},
3263+
"SizeVariant": {
3264+
"value": "XS",
3265+
"type": "componentConfig"
3266+
}
3267+
}
3268+
},
3269+
"HighlightLine": {
3270+
"SurfaceFill": {
3271+
"value": "{q.content.ondefault.brand.rest}",
3272+
"type": "color",
3273+
"description": "Apply as fill on HightlightLine"
3274+
},
3275+
"Selected": {
3276+
"Opacity": {
3277+
"value": "1",
3278+
"type": "opacity",
3279+
"description": "Controlls the visibility of the HighlightLine; Apply on selected / active tabs only. <HighlightLine>"
3280+
}
3281+
},
3282+
"Unselected": {
3283+
"Opacity": {
3284+
"value": "0",
3285+
"type": "opacity",
3286+
"description": "Controlls the visibility of the HighlightLine; Apply on unselected / inactive and disabled tabs. <HighlightLine>"
3287+
}
3288+
}
3289+
},
3290+
"MD": {
3291+
"HighlightLine": {
3292+
"Height": {
3293+
"value": "{core.dimensionPX.2}",
3294+
"type": "sizing",
3295+
"description": "Defines the thickness of the highlight line.\nApply on <HighlightLine>"
3296+
}
3297+
},
3298+
"ContentCol": {
3299+
"TopPadding": {
3300+
"value": "{core.dimensionREM.8}",
3301+
"type": "spacing",
3302+
"description": "Defines the topPadding of a tab; Apply on <ContentCol>"
3303+
},
3304+
"ItemSpacing": {
3305+
"value": "{core.dimensionREM.8}",
3306+
"type": "spacing",
3307+
"description": "Defines the gap beteen the tabs label/icon and the <HighlightLIne>"
3308+
}
3309+
},
3310+
"ContentRow": {
3311+
"PaddingLeftRight": {
3312+
"value": "{core.dimensionPX.16}",
3313+
"type": "spacing",
3314+
"description": "Defines the padding left and right of <ContentRow>"
3315+
},
3316+
"ItemSpacing": {
3317+
"value": "{core.dimensionPX.2}",
3318+
"type": "spacing",
3319+
"description": "Defines the gap between the icon and the label of a tab. Apply on <ContentRow>"
3320+
}
3321+
},
3322+
"Icon": {
3323+
"Sizing": {
3324+
"value": "{core.dimensionREM.16}",
3325+
"type": "sizing",
3326+
"description": "Defines height and width of the icon of a tab"
3327+
},
3328+
"SizeVariant": {
3329+
"value": "SM",
3330+
"type": "componentConfig"
3331+
}
3332+
}
3333+
},
3334+
"LG": {
3335+
"HighlightLine": {
3336+
"Height": {
3337+
"value": "{core.dimensionPX.2}",
3338+
"type": "sizing",
3339+
"description": "Defines the thickness of the highlight line.\nApply on <HighlightLine>"
3340+
}
3341+
},
3342+
"ContentCol": {
3343+
"TopPadding": {
3344+
"value": "{core.dimensionREM.8}",
3345+
"type": "spacing",
3346+
"description": "Defines the topPadding of a tab; Apply on <ContentCol>"
3347+
},
3348+
"ItemSpacing": {
3349+
"value": "{core.dimensionREM.8}",
3350+
"type": "spacing",
3351+
"description": "Defines the gap beteen the tabs label/icon and the <HighlightLIne>"
3352+
}
3353+
},
3354+
"ContentRow": {
3355+
"PaddingLeftRight": {
3356+
"value": "{core.dimensionPX.16}",
3357+
"type": "spacing",
3358+
"description": "Defines the padding left and right of <ContentRow>"
3359+
},
3360+
"ItemSpacing": {
3361+
"value": "{core.dimensionPX.4}",
3362+
"type": "spacing",
3363+
"description": "Defines the gap between the icon and the label of a tab. Apply on <ContentRow>"
3364+
}
3365+
},
3366+
"Icon": {
3367+
"Sizing": {
3368+
"value": "{core.dimensionREM.16}",
3369+
"type": "sizing",
3370+
"description": "Defines height and width of the icon of a tab"
3371+
},
3372+
"SizeVariant": {
3373+
"value": "SM",
3374+
"type": "componentConfig"
3375+
}
3376+
}
3377+
},
3378+
"Label": {
3379+
"Active": {
3380+
"value": "{q.content.ondefault.brand.rest}",
3381+
"type": "color",
3382+
"description": "Defines the color of the label of a tab. Apply on <label>"
3383+
},
3384+
"Unselected": {
3385+
"value": "{q.content.ondefault.alpha}",
3386+
"type": "color"
3387+
},
3388+
"Disabled": {
3389+
"value": "{q.content.ondisabled.alpha}",
3390+
"type": "color",
3391+
"description": "Defines the color of the label of a tab. Apply on <label>"
3392+
}
3393+
},
3394+
"Icon": {
3395+
"Active": {
3396+
"value": "{q.content.ondefault.brand.rest}",
3397+
"type": "color",
3398+
"description": "Defines the color of the label of a tab. Apply on <label>"
3399+
},
3400+
"Unselected": {
3401+
"value": "{q.content.ondefault.alpha}",
3402+
"type": "color",
3403+
"description": "Defines the color of the label of a tab. Apply on <label>"
3404+
},
3405+
"Disabled": {
3406+
"value": "{q.content.ondisabled.alpha}",
3407+
"type": "color",
3408+
"description": "Defines the color of the label of a tab. Apply on <label>"
3409+
}
3410+
}
3411+
},
3412+
"ButtonWrapper": {
3413+
"SM": {
3414+
"Leading": {
3415+
"Padding": {
3416+
"value": "0 {core.dimensionREM.8} 0 0",
3417+
"type": "spacing",
3418+
"description": "Defines the padding of the left/leading buttons wrapper; Apply on <ButtonWrapper>"
3419+
}
3420+
},
3421+
"Trailing": {
3422+
"Padding": {
3423+
"value": "0 0 0 {core.dimensionREM.8}",
3424+
"type": "spacing",
3425+
"description": "Defines the padding of the right/trailing buttons wrapper; Apply on <ButtonWrapper>"
3426+
}
3427+
}
3428+
},
3429+
"MD": {
3430+
"Leading": {
3431+
"Padding": {
3432+
"value": "0 {core.dimensionREM.8} 0 0",
3433+
"type": "spacing",
3434+
"description": "Defines the padding of the left/leading buttons wrapper; Apply on <ButtonWrapper>"
3435+
}
3436+
},
3437+
"Trailing": {
3438+
"Padding": {
3439+
"value": "0 0 0 {core.dimensionREM.8}",
3440+
"type": "spacing",
3441+
"description": "Defines the padding of the right/trailing buttons wrapper; Apply on <ButtonWrapper>"
3442+
}
3443+
}
3444+
},
3445+
"LG": {
3446+
"Leading": {
3447+
"Padding": {
3448+
"value": "0 {core.dimensionREM.12}",
3449+
"type": "spacing",
3450+
"description": "Defines the padding of the left/leading buttons wrapper; Apply on <ButtonWrapper>"
3451+
}
3452+
},
3453+
"Trailing": {
3454+
"Padding": {
3455+
"value": "0 0 0 {core.dimensionREM.12}",
3456+
"type": "spacing",
3457+
"description": "Defines the padding of the right/trailing buttons wrapper; Apply on <ButtonWrapper>"
3458+
}
3459+
}
3460+
}
3461+
}
3462+
}
32213463
}
32223464
}

‎packages/figma-design-tokens/input/tokens/semantics/BLR_SEM.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -950,7 +950,7 @@
950950
},
951951
"MD": {
952952
"Label": {
953-
"value": "{core.typography.sourceSansPro.semibold.75FixHeight}",
953+
"value": "{core.typography.sourceSansPro.semibold.87FixHeight}",
954954
"type": "typography"
955955
},
956956
"LoaderSize": {

0 commit comments

Comments
 (0)