From 898248fc54e010a5321e56f0bcdd83c89c7a7d3b Mon Sep 17 00:00:00 2001 From: AnnaSchmidt05 <144680674+AnnaSchmidt05@users.noreply.github.com> Date: Wed, 18 Dec 2024 13:28:44 +0000 Subject: [PATCH] - Added fluid font tokens from Fluid Typescale Visualizer - Updated values for font size tokens to be added to figma and added descriptions --- tokens.json | 484 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 415 insertions(+), 69 deletions(-) diff --git a/tokens.json b/tokens.json index 68e6548..b55fe91 100644 --- a/tokens.json +++ b/tokens.json @@ -1,5 +1,313 @@ { "00 Core": { + "font-scale": { + "const": { + "min": { + "f0": { + "value": "16", + "type": "fontSizes" + }, + "r": { + "value": "1.125", + "type": "fontSizes" + }, + "n": { + "value": "1", + "type": "fontSizes" + } + }, + "max": { + "f0": { + "value": "20", + "type": "fontSizes" + }, + "r": { + "value": "1.2", + "type": "fontSizes" + }, + "n": { + "value": "1", + "type": "fontSizes" + } + } + }, + "f-3": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(-3/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(-3/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f-3.max}-{font-scale.f-3.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f-3.max} - {viewport.max} * {font-scale.f-3.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f-3.v} + {font-scale.f-3.r})", + "type": "fontSizes" + } + }, + "f-2": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(-2/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(-2/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f-2.max}-{font-scale.f-2.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f-2.max} - {viewport.max} * {font-scale.f-2.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f-2.v} + {font-scale.f-2.r})", + "type": "fontSizes" + } + }, + "f-1": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(-1/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(-1/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f-1.max}-{font-scale.f-1.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f-1.max} - {viewport.max} * {font-scale.f-1.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f-1.v} + {font-scale.f-1.r})", + "type": "fontSizes" + } + }, + "f0": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(0/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(0/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f0.max}-{font-scale.f0.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f0.max} - {viewport.max} * {font-scale.f0.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f0.v} + {font-scale.f0.r})", + "type": "fontSizes" + } + }, + "f1": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(1/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(1/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f1.max}-{font-scale.f1.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f1.max} - {viewport.max} * {font-scale.f1.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f1.v} + {font-scale.f1.r})", + "type": "fontSizes" + } + }, + "f2": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(2/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(2/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f2.max}-{font-scale.f2.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f2.max} - {viewport.max} * {font-scale.f2.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f2.v} + {font-scale.f2.r})", + "type": "fontSizes" + } + }, + "f3": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(3/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(3/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f3.max}-{font-scale.f3.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f3.max} - {viewport.max} * {font-scale.f3.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f3.v} + {font-scale.f3.r})", + "type": "fontSizes" + } + }, + "f4": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(4/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(4/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f4.max}-{font-scale.f4.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f4.max} - {viewport.max} * {font-scale.f4.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f4.v} + {font-scale.f4.r})", + "type": "fontSizes" + } + }, + "f5": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(5/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(5/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f5.max}-{font-scale.f5.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f5.max} - {viewport.max} * {font-scale.f5.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f5.v} + {font-scale.f5.r})", + "type": "fontSizes" + } + }, + "f6": { + "min": { + "value": "5*roundTo(({font-scale.const.min.f0}*{font-scale.const.min.r}^(6/{font-scale.const.min.n})/5),1)", + "type": "fontSizes" + }, + "max": { + "value": "5*roundTo(({font-scale.const.max.f0}*{font-scale.const.max.r}^(6/{font-scale.const.max.n})/5),1)", + "type": "fontSizes" + }, + "v": { + "value": "100 * ({font-scale.f6.max}-{font-scale.f6.min}) / ({viewport.max}-{viewport.min})", + "type": "fontSizes" + }, + "r": { + "value": "( {viewport.min} * {font-scale.f6.max} - {viewport.max} * {font-scale.f6.min}) / ({viewport.min}-{viewport.max})", + "type": "fontSizes" + }, + "fluid": { + "value": "round(({viewport.width}/100) * {font-scale.f6.v} + {font-scale.f6.r})", + "type": "fontSizes" + } + } + }, + "font-size": { + "f-3": { + "value": "min( max( {font-scale.f-3.min}, {font-scale.f-3.fluid}) ,{font-scale.f-3.max})", + "type": "fontSizes" + }, + "f-2": { + "value": "min( max( {font-scale.f-2.min}, {font-scale.f-2.fluid}) ,{font-scale.f-2.max})", + "type": "fontSizes" + }, + "f-1": { + "value": "min( max( {font-scale.f-1.min}, {font-scale.f-1.fluid}) ,{font-scale.f-1.max})", + "type": "fontSizes" + }, + "f0": { + "value": "min( max( {font-scale.f0.min}, {font-scale.f0.fluid}) ,{font-scale.f0.max})", + "type": "fontSizes" + }, + "f1": { + "value": "min( max( {font-scale.f1.min}, {font-scale.f1.fluid}) ,{font-scale.f1.max})", + "type": "fontSizes" + }, + "f2": { + "value": "min( max( {font-scale.f2.min}, {font-scale.f2.fluid}) ,{font-scale.f2.max})", + "type": "fontSizes" + }, + "f3": { + "value": "min( max( {font-scale.f3.min}, {font-scale.f3.fluid}) ,{font-scale.f3.max})", + "type": "fontSizes" + }, + "f4": { + "value": "min( max( {font-scale.f4.min}, {font-scale.f4.fluid}) ,{font-scale.f4.max})", + "type": "fontSizes" + }, + "f5": { + "value": "min( max( {font-scale.f5.min}, {font-scale.f5.fluid}) ,{font-scale.f5.max})", + "type": "fontSizes" + }, + "f6": { + "value": "min( max( {font-scale.f6.min}, {font-scale.f6.fluid}) ,{font-scale.f6.max})", + "type": "fontSizes" + } + }, + "viewport": { + "width": { + "value": "{viewport.min}", + "type": "sizing" + }, + "min": { + "value": "320", + "type": "sizing" + }, + "max": { + "value": "1920", + "type": "sizing" + } + }, "color": { "white": { "value": "#ffffff", @@ -592,7 +900,8 @@ "size-old": { "10": { "value": "10", - "type": "fontSizes" + "type": "fontSizes", + "description": "To delete" }, "12": { "value": "12", @@ -673,154 +982,190 @@ "size": { "bp-sm": { "f6": { - "value": "40.1", - "type": "fontSizes" + "value": "39.84", + "type": "fontSizes", + "description": "Tokens value for figma" }, "f5": { - "value": "34.7", - "type": "fontSizes" + "value": "34.88", + "type": "fontSizes", + "description": "Token value for figma" }, "f3": { - "value": "26.1", - "type": "fontSizes" + "value": "26.36", + "type": "fontSizes", + "description": "Token value for figma" }, "f2": { - "value": "22.6", - "type": "fontSizes" + "value": "22.52", + "type": "fontSizes", + "description": "Token value for figma\n" }, "f1": { - "value": "19.7", - "type": "fontSizes" + "value": "19.68", + "type": "fontSizes", + "description": "Token value for figma \n" }, "f0": { - "value": "17.1", - "type": "fontSizes" + "value": "17.12", + "type": "fontSizes", + "description": "Token value for figma" }, "f-1": { - "value": "14.9", - "type": "fontSizes" + "value": "14.84", + "type": "fontSizes", + "description": "Token value for figma" }, "f-2": { - "value": "13", - "type": "fontSizes" + "value": "13.28", + "type": "fontSizes", + "description": "Token value for figma" }, "f-3": { - "value": "11.3", - "type": "fontSizes" + "value": "11.28", + "type": "fontSizes", + "description": "Token value for figma" } }, "bp-xs": { "f6": { - "value": "32.4", - "type": "fontSizes" + "value": "32", + "type": "fontSizes", + "description": "Token value for figma" }, "f5": { - "value": "28.8", - "type": "fontSizes" + "value": "29", + "type": "fontSizes", + "description": "Token value for figma" }, "f3": { - "value": "22.8", - "type": "fontSizes" + "value": "23", + "type": "fontSizes", + "description": "Token value for figma" }, "f2": { - "value": "20.3", - "type": "fontSizes" + "value": "20", + "type": "fontSizes", + "description": "Token value for figma" }, "f1": { "value": "18", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma" }, "f0": { "value": "16", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma" }, "f-1": { - "value": "14.2", - "type": "fontSizes" + "value": "14", + "type": "fontSizes", + "description": "Token value for figma" }, "f-2": { - "value": "12.6", - "type": "fontSizes" + "value": "13", + "type": "fontSizes", + "description": "Token value for figma" }, "f-3": { - "value": "11.2", - "type": "fontSizes" + "value": "11", + "type": "fontSizes", + "description": "Token value for figma" } }, "bp-lg": { "f6": { - "value": "51.5", - "type": "fontSizes" + "value": "51.6", + "type": "fontSizes", + "description": "Token value for figma" }, "f5": { - "value": "43.5", - "type": "fontSizes" + "value": "43.7", + "type": "fontSizes", + "description": "Token value for figma" }, "f3": { - "value": "31", - "type": "fontSizes" + "value": "31.4", + "type": "fontSizes", + "description": "Token value for figma" }, "f2": { - "value": "26.2", - "type": "fontSizes" + "value": "26.3", + "type": "fontSizes", + "description": "Token value for figma" }, "f1": { "value": "22.2", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma " }, "f0": { "value": "18.8", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma" }, "f-1": { - "value": "15.9", - "type": "fontSizes" + "value": "16.10", + "type": "fontSizes", + "description": "Token value for figma" }, "f-2": { - "value": "13.5", - "type": "fontSizes" + "value": "13.7", + "type": "fontSizes", + "description": "Token vaue for figma" }, "f-3": { - "value": "11.5", - "type": "fontSizes" + "value": "11.7", + "type": "fontSizes", + "description": "Token value for figma" } }, "bp-xl": { "f6": { - "value": "59.7", - "type": "fontSizes" + "value": "60", + "type": "fontSizes", + "description": "Token value for figma" }, "f5": { - "value": "49.8", - "type": "fontSizes" + "value": "50", + "type": "fontSizes", + "description": "Token value for figma" }, "f3": { - "value": "34.6", - "type": "fontSizes" + "value": "35", + "type": "fontSizes", + "description": "Token value for figma" }, "f2": { - "value": "28.8", - "type": "fontSizes" + "value": "29", + "type": "fontSizes", + "description": "Token value for figma" }, "f1": { "value": "24", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma" }, "f0": { "value": "20", - "type": "fontSizes" + "type": "fontSizes", + "description": "Token value for figma" }, "f-1": { - "value": "16.7", - "type": "fontSizes" + "value": "17", + "type": "fontSizes", + "description": "Token value for figma" }, "f-2": { - "value": "13.9", - "type": "fontSizes" + "value": "14", + "type": "fontSizes", + "description": "Token value for figma\n" }, "f-3": { - "value": "11.6", - "type": "fontSizes" + "value": "12", + "type": "fontSizes", + "description": "Token value for figma" } } } @@ -1049,7 +1394,7 @@ "textCase": "{font.text-case.sentence}" }, "type": "typography", - "description": "To be used for heroes" + "description": "To be updated to use fluid token for size or delete if not needed\n\nUpdate token naming to reflect correct Breakpoint sizes\n\n\nTo be used for heroes" }, "xl": { "value": { @@ -1730,7 +2075,8 @@ "heading-brand": { "xxl": { "value": "{text.heading-brand.breakpoint-md.xxl}", - "type": "typography" + "type": "typography", + "description": "To delete" }, "xl": { "value": "{text.heading-brand.breakpoint-md.xl}",