diff --git a/tokens/blau.json b/tokens/blau.json index ec2bc26ea8..18bb287ad6 100644 --- a/tokens/blau.json +++ b/tokens/blau.json @@ -3353,6 +3353,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "componentProperties": { "dismissActionType": { "value": "neutral", diff --git a/tokens/esimflag.json b/tokens/esimflag.json index 722bc369c0..475800b716 100644 --- a/tokens/esimflag.json +++ b/tokens/esimflag.json @@ -3375,6 +3375,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/figma/utils/constants.mjs b/tokens/figma/utils/constants.mjs index 40e9ed37a9..f6a41a6227 100644 --- a/tokens/figma/utils/constants.mjs +++ b/tokens/figma/utils/constants.mjs @@ -29,6 +29,7 @@ export const VARIABLE_SCOPES = { FONT_FAMILY: "FONT_FAMILY", TEXT_CONTENT: "TEXT_CONTENT", WIDTH_HEIGHT: "WIDTH_HEIGHT", + GAP: "GAP", }; export const BRANDS = { diff --git a/tokens/figma/utils/extract-json-data.mjs b/tokens/figma/utils/extract-json-data.mjs index d3d3b3db65..185b555402 100644 --- a/tokens/figma/utils/extract-json-data.mjs +++ b/tokens/figma/utils/extract-json-data.mjs @@ -363,6 +363,62 @@ export const extractSkinJsonData = ( }; }); + const spacingArray = Object.keys( + parsedContent.spacing + ).flatMap((key) => { + const value = + parsedContent.spacing[key].value; + const result = []; + + // Helper to capitalize side and append to token name + const capitalize = (str) => + str.charAt(0).toUpperCase() + + str.slice(1); + + // Sides we care about + const sides = [ + "top", + "right", + "bottom", + "left", + ]; + + // Push all breakpoints for a given side + const pushBreakpoints = ( + side, + breakpoints + ) => { + Object.entries(breakpoints).forEach( + ([breakpoint, bpValue]) => { + const figmaName = side + ? `${key}${capitalize(side)}` + : key; + result.push({ + name: `spacing/${breakpoint}/${figmaName}`, + value: Number(bpValue), + }); + } + ); + }; + + // CASE 1 — scalar (all sides, no sides explicitly defined) + if ( + typeof value === "object" && + value !== null && + !sides.some((side) => side in value) + ) { + pushBreakpoints(null, value); // Only master variable + } else { + // CASE 2 — side-specific values + sides.forEach((side) => { + if (value[side]) + pushBreakpoints(side, value[side]); + }); + } + + return result; + }); + // Accumulate results accumulator[fileName] = { light: processColors( @@ -380,6 +436,7 @@ export const extractSkinJsonData = ( fontWeight: fontWeightArray, fontSize: fontSizeArray, lineHeight: lineHeightArray, + spacing: spacingArray, }; return accumulator; @@ -760,6 +817,60 @@ export const extractMiddlewareJsonData = ( }; }); + const spacingArray = Object.keys( + parsedContent.spacing + ).flatMap((key) => { + const value = + parsedContent.spacing[key].value; + const result = []; + + const capitalize = (str) => + str.charAt(0).toUpperCase() + + str.slice(1); + + const sides = [ + "top", + "right", + "bottom", + "left", + ]; + + const pushBreakpoints = ( + nameSuffix, + breakpoints + ) => { + Object.entries(breakpoints).forEach( + ([bp, bpValue]) => { + const figmaName = nameSuffix + ? `${key}${capitalize(nameSuffix)}` + : key; + result.push({ + name: `spacing/${bp}/${figmaName}`, + value: Number(bpValue), + }); + } + ); + }; + + // CASE 1 — scalar (all breakpoints, no sides explicitly defined) + if ( + typeof value === "object" && + value !== null && + !sides.some((side) => side in value) + ) { + pushBreakpoints(null, value); // master variable only + } else { + // CASE 2 — side-specific values + sides.forEach((side) => { + if (value[side]) { + pushBreakpoints(side, value[side]); + } + }); + } + + return result; + }); + const themeVariantArray = Object.keys( parsedContent.themeVariant ).map((key) => ({ @@ -773,7 +884,8 @@ export const extractMiddlewareJsonData = ( ).map((key) => ({ name: `componentProperties/${key}`, value: - parsedContent.componentProperties[key].value, + parsedContent.componentProperties[key] + .value, })); // Accumulate results @@ -793,8 +905,10 @@ export const extractMiddlewareJsonData = ( fontWeight: fontWeightArray, fontSize: fontSizeArray, lineHeight: lineHeightArray, + spacing: spacingArray, themeVariant: themeVariantArray, - componentProperties: componentPropertiesArray, + componentProperties: + componentPropertiesArray, }; return accumulator; diff --git a/tokens/figma/variables.mjs b/tokens/figma/variables.mjs index 0c9fc06019..e5094e1b5b 100644 --- a/tokens/figma/variables.mjs +++ b/tokens/figma/variables.mjs @@ -118,6 +118,16 @@ export const getNonColorVariables = ( ], hasAlias: false, }, + { + variables: jsonData[brand]?.spacing || [], + collectionName: COLLECTION_NAMES.SKIN, + resolvedType: VARIABLE_TYPES.FLOAT, + variableScopes: [ + VARIABLE_SCOPES.WIDTH_HEIGHT, + VARIABLE_SCOPES.GAP, + ], + hasAlias: false, + }, { variables: jsonData[brand]?.themeVariant || [], diff --git a/tokens/movistar-new.json b/tokens/movistar-new.json index 76311a223d..abdcc04ab3 100644 --- a/tokens/movistar-new.json +++ b/tokens/movistar-new.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 8, + "desktop": 12 + }, + "right": { + "mobile": 8, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 16 + }, + "bottom": { + "mobile": 16, + "desktop": 16 + }, + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 2 + }, + "bottom": { + "mobile": 18, + "desktop": 2 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 2, + "desktop": 2 + }, + "bottom": { + "mobile": 2, + "desktop": 2 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 40 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 56 + }, + "bottom": { + "mobile": 16, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 48 + }, + "bottom": { + "mobile": 16, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 32 + }, + "bottom": { + "mobile": 16, + "desktop": 32 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/movistar.json b/tokens/movistar.json index 8892151f27..cbdcc2bed6 100644 --- a/tokens/movistar.json +++ b/tokens/movistar.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "default", diff --git a/tokens/o2-new.json b/tokens/o2-new.json index b83f02a01d..0f154bc8af 100644 --- a/tokens/o2-new.json +++ b/tokens/o2-new.json @@ -3375,6 +3375,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/o2.json b/tokens/o2.json index 882133519d..8ba25f5fb7 100644 --- a/tokens/o2.json +++ b/tokens/o2.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/schema/skin-schema.json b/tokens/schema/skin-schema.json index 77159b2619..c2dc45171c 100644 --- a/tokens/schema/skin-schema.json +++ b/tokens/schema/skin-schema.json @@ -1,6 +1,7 @@ { "additionalProperties": false, - "required": ["light", "dark", "radius", "text", "global", "themeVariant", "componentProperties"], + "required": ["light", "dark", "radius", "text", "spacing", "global", "themeVariant", "componentProperties"], + "properties": { "global": { "additionalProperties": false, @@ -38,6 +39,10 @@ } } }, + "spacing": { + "comment": "Aquí se obliga a usar los spacing definidos", + "allOf": [{ "$ref": "#/global/spacing" }] + }, "themeVariant": { "comment": "Aquí se definen las variantes de tema", "allOf": [{ "$ref": "#/global/themeVariant" }] @@ -645,6 +650,7 @@ }, "weight": { "additionalProperties": false, + "required": ["drawerTitle", "cardTitle", "rowTitle", "button", "tabsLabel", "link", "indicator", "navigationBar", "title1", "title2", "title3", "title4", "text5", "text6", "text7", "text8", "text9", "text10", "chipLabel"], "properties": { "drawerTitle": { "$ref": "#/definitions/weightProperties" }, "cardTitle": { "$ref": "#/definitions/weightProperties" }, @@ -669,6 +675,38 @@ }, "size": { "additionalProperties": false, + "required": [ + "drawerTitle", + "cardPretitleDefault", + "cardTitleDefault", + "cardSubtitleDefault", + "cardDescriptionDefault", + "cardPretitleSnap", + "cardTitleSnap", + "cardSubtitleSnap", + "cardDescriptionSnap", + "tabsLabel", + "title1", + "title2", + "title3", + "title4", + "text1", + "text2", + "text3", + "text4", + "text5", + "text6", + "text7", + "text8", + "text9", + "text10", + "chipLabel", + "inputLabel", + "inputValue", + "inputHelperText", + "stepperStepLabel", + "loadingScreenTitle" + ], "properties": { "drawerTitle": { "$ref": "#/definitions/sizeProperties" }, "cardPretitleDefault": { "$ref": "#/definitions/sizeProperties" }, @@ -704,6 +742,38 @@ }, "lineHeight": { "additionalProperties": false, + "required": [ + "drawerTitle", + "cardPretitleDefault", + "cardTitleDefault", + "cardSubtitleDefault", + "cardDescriptionDefault", + "cardPretitleSnap", + "cardTitleSnap", + "cardSubtitleSnap", + "cardDescriptionSnap", + "tabsLabel", + "title1", + "title2", + "title3", + "title4", + "text1", + "text2", + "text3", + "text4", + "text5", + "text6", + "text7", + "text8", + "text9", + "text10", + "chipLabel", + "inputLabel", + "inputValue", + "inputHelperText", + "stepperStepLabel", + "loadingScreenTitle" + ], "properties": { "drawerTitle": { "$ref": "#/definitions/lineHeightProperties" }, "cardPretitleDefault": { "$ref": "#/definitions/lineHeightProperties" }, @@ -737,6 +807,21 @@ "loadingScreenTitle": { "$ref": "#/definitions/lineHeightProperties" } } }, + "spacing": { + "additionalProperties": false, + "required": ["buttonDefaultPadding", "buttonSmallPadding", "cardDefaultPadding", "tagPadding", "feedbackScreenPadding", "inputPadding", "heroPadding", "headerPadding", "drawerPadding"], + "properties": { + "buttonDefaultPadding": { "$ref": "#/definitions/spacingProperties" }, + "buttonSmallPadding": { "$ref": "#/definitions/spacingProperties" }, + "cardDefaultPadding": { "$ref": "#/definitions/spacingProperties" }, + "tagPadding": { "$ref": "#/definitions/spacingProperties" }, + "feedbackScreenPadding": { "$ref": "#/definitions/spacingProperties" }, + "inputPadding": { "$ref": "#/definitions/spacingProperties" }, + "heroPadding": { "$ref": "#/definitions/spacingProperties" }, + "headerPadding": { "$ref": "#/definitions/spacingProperties" }, + "drawerPadding": { "$ref": "#/definitions/spacingProperties" } + } + }, "themeVariant": { "additionalProperties": false, "required": ["successFeedback", "brandLoadingScreen"], @@ -949,16 +1034,12 @@ "type": "object", "patternProperties": { "value": { - "type": "object", - "properties": { - "desktop": { - "type": "number" - }, - "mobile": { - "type": "number" + "allOf": [ + { "$ref": "#/definitions/breakpoints" }, + { + "required": ["mobile", "desktop"] } - }, - "required": ["desktop", "mobile"] + ] }, "type": { "const": "typography" @@ -970,16 +1051,12 @@ "type": "object", "patternProperties": { "value": { - "type": "object", - "properties": { - "desktop": { - "type": "number" - }, - "mobile": { - "type": "number" + "allOf": [ + { "$ref": "#/definitions/breakpoints" }, + { + "required": ["mobile", "desktop"] } - }, - "required": ["desktop", "mobile"] + ] }, "type": { "const": "typography" @@ -987,6 +1064,31 @@ }, "required": ["value", "type"] }, + "spacingProperties": { + "type": "object", + "required": ["value", "type"], + "properties": { + "type": { "const": "spacing" }, + "value": { + "anyOf": [ + { "$ref": "#/definitions/breakpoints" }, + + { + "type": "object", + "properties": { + "top": { "$ref": "#/definitions/breakpoints" }, + "right": { "$ref": "#/definitions/breakpoints" }, + "bottom": { "$ref": "#/definitions/breakpoints" }, + "left": { "$ref": "#/definitions/breakpoints" } + }, + "additionalProperties": false, + "minProperties": 1 + } + ] + } + } + }, + "themeVariantProperties": { "type": "object", "patternProperties": { @@ -1011,6 +1113,17 @@ } }, "required": ["value", "type"] + }, + "breakpoints": { + "type": "object", + "properties": { + "mobile": { "type": "number" }, + "tablet": { "type": "number" }, + "desktop": { "type": "number" } + }, + "minProperties": 1, + "required": ["mobile", "desktop"], + "additionalProperties": false } } } diff --git a/tokens/telefonica.json b/tokens/telefonica.json index c0080e085e..c88d27d53b 100644 --- a/tokens/telefonica.json +++ b/tokens/telefonica.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/tu.json b/tokens/tu.json index cf5b38990f..644c0d3852 100644 --- a/tokens/tu.json +++ b/tokens/tu.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/vivo-new.json b/tokens/vivo-new.json index e41f4f14a9..54886b5a4f 100644 --- a/tokens/vivo-new.json +++ b/tokens/vivo-new.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse", diff --git a/tokens/vivo.json b/tokens/vivo.json index cd163787ca..7a11d425ac 100644 --- a/tokens/vivo.json +++ b/tokens/vivo.json @@ -3343,6 +3343,149 @@ } } }, + "spacing": { + "buttonDefaultPadding": { + "value": { + "left": { + "mobile": 16, + "desktop": 16 + }, + "right": { + "mobile": 16, + "desktop": 16 + } + }, + "type": "spacing" + }, + "buttonSmallPadding": { + "value": { + "left": { + "mobile": 12, + "desktop": 12 + }, + "right": { + "mobile": 12, + "desktop": 12 + } + }, + "type": "spacing" + }, + "cardDefaultPadding": { + "value": { + "top": { + "mobile": 16, + "desktop": 24 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 24 + }, + "right": { + "mobile": 16, + "desktop": 24 + } + }, + "type": "spacing" + }, + "inputPadding": { + "value": { + "top": { + "mobile": 18, + "desktop": 8 + }, + "bottom": { + "mobile": 18, + "desktop": 8 + } + }, + "type": "spacing" + }, + "tagPadding": { + "value": { + "top": { + "mobile": 4, + "desktop": 4 + }, + "bottom": { + "mobile": 4, + "desktop": 4 + } + }, + "type": "spacing" + }, + "feedbackScreenPadding": { + "value": { + "top": { + "mobile": 64, + "desktop": 64 + }, + "bottom": { + "mobile": 16, + "desktop": 64 + }, + "left": { + "mobile": 16, + "desktop": 64 + }, + "right": { + "mobile": 16, + "desktop": 64 + } + }, + "type": "spacing" + }, + "heroPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 56 + }, + "bottom": { + "mobile": 24, + "desktop": 56 + } + }, + "type": "spacing" + }, + "headerPadding": { + "value": { + "top": { + "mobile": 24, + "desktop": 48 + }, + "bottom": { + "mobile": 24, + "desktop": 48 + } + }, + "type": "spacing" + }, + "drawerPadding": { + "value": { + "top": { + "mobile": 40, + "desktop": 40 + }, + "bottom": { + "mobile": 16, + "desktop": 24 + }, + "left": { + "mobile": 16, + "desktop": 40 + }, + "right": { + "mobile": 16, + "desktop": 40 + } + }, + "type": "spacing" + } + }, "themeVariant": { "successFeedback": { "value": "inverse",