From 449d0c3b3c241fcd3087375d2a3da821bb145d51 Mon Sep 17 00:00:00 2001 From: Luke Emmerson-Finch Date: Mon, 8 Jan 2024 13:20:19 +0000 Subject: [PATCH] feat(data): Adding descriptions to origin web fonts to explain what the clamp values are. Also added a subfolder for fonts to show these are for web only. --- data/tokens/global.json | 240 ++++++++++++++++++++-------------------- data/tokens/origin.json | 118 +++++++++++--------- 2 files changed, 187 insertions(+), 171 deletions(-) diff --git a/data/tokens/global.json b/data/tokens/global.json index afa8f870..8a75664d 100644 --- a/data/tokens/global.json +++ b/data/tokens/global.json @@ -311,162 +311,164 @@ } }, "typography": { - "hero heading": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-headline}", - "fontWeight": "{origin.fontWeights.black}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f7}" - }, - "type": "typography" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-headline}", - "fontWeight": "{origin.fontWeights.black}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f8}" - }, - "type": "typography" - } - }, - "heading": { - "S": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f3}" - }, - "type": "typography" - }, - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f4}" - }, - "type": "typography" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f5}" - }, - "type": "typography" - }, - "XL": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.bold}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f6}" - }, - "type": "typography" - } - }, - "subheading": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f3}" - }, - "type": "typography" - }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f4}" - }, - "type": "typography" - } - }, - "body": { - "M": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.f0}" + "web": { + "hero heading": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step7}" + }, + "type": "typography" }, - "type": "typography" + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-headline}", + "fontWeight": "{origin.fontWeights.black}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step8}" + }, + "type": "typography" + } }, - "L": { - "value": { - "fontFamily": "{origin.fontFamilies.sage-text}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.f2}" + "heading": { + "S": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography" }, - "type": "typography" - } - }, - "component": { - "strong": { "M": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.medium}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.f0}" + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step4}" }, "type": "typography" }, "L": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.medium}", + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f1}" + "fontSize": "{origin.fontSize.web.step5}" }, "type": "typography" }, "XL": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.medium}", + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.bold}", "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f3}" + "fontSize": "{origin.fontSize.web.step6}" }, "type": "typography" } }, - "default": { + "subheading": { "M": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.500}", - "fontSize": "{origin.fontSize.f0}" + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" }, "type": "typography" }, "L": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", - "fontWeight": "{origin.fontWeights.regular}", + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.medium}", "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f1}" + "fontSize": "{origin.fontSize.web.step4}" + }, + "type": "typography" + } + }, + "body": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-text}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" }, "type": "typography" }, - "XL": { + "L": { "value": { - "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontFamily": "{origin.fontFamilies.sage-text}", "fontWeight": "{origin.fontWeights.regular}", - "lineHeight": "{origin.lineHeights.400}", - "fontSize": "{origin.fontSize.f3}" + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step2}" }, "type": "typography" } + }, + "component": { + "strong": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography" + }, + "XL": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.medium}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography" + } + }, + "default": { + "M": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.500}", + "fontSize": "{origin.fontSize.web.step0}" + }, + "type": "typography" + }, + "L": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step1}" + }, + "type": "typography" + }, + "XL": { + "value": { + "fontFamily": "{origin.fontFamilies.sage-ui}", + "fontWeight": "{origin.fontWeights.regular}", + "lineHeight": "{origin.lineHeights.400}", + "fontSize": "{origin.fontSize.web.step3}" + }, + "type": "typography" + } + } } } } diff --git a/data/tokens/origin.json b/data/tokens/origin.json index 4950cf03..3771e8dd 100644 --- a/data/tokens/origin.json +++ b/data/tokens/origin.json @@ -407,58 +407,72 @@ } }, "fontSize": { - "f-2": { - "value": "clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)", - "type": "fontSizes" - }, - "f-1": { - "value": "clamp(0.8619rem, 0.9384rem + -0.0637vw, 0.9256rem)", - "type": "fontSizes" - }, - "f0": { - "value": "clamp(1rem, 1rem + 0vw, 1rem)", - "type": "fontSizes", - "description": "SV: 16px\nLV: 16px" - }, - "f1": { - "value": "clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)", - "type": "fontSizes" - }, - "f2": { - "value": "clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)", - "type": "fontSizes" - }, - "f3": { - "value": "clamp(1.26rem, 1.1999rem + 0.3006vw, 1.5606rem)", - "type": "fontSizes" - }, - "f4": { - "value": "clamp(1.3606rem, 1.2706rem + 0.45vw, 1.8106rem)", - "type": "fontSizes" - }, - "f5": { - "value": "clamp(1.4694rem, 1.3431rem + 0.6313vw, 2.1006rem)", - "type": "fontSizes" - }, - "f6": { - "value": "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)", - "type": "fontSizes" - }, - "f7": { - "value": "clamp(1.7138rem, 1.4913rem + 1.1125vw, 2.8263rem)", - "type": "fontSizes" - }, - "f8": { - "value": "clamp(1.8506rem, 1.5651rem + 1.4275vw, 3.2781rem)", - "type": "fontSizes" - }, - "f9": { - "value": "clamp(1.9988rem, 1.6379rem + 1.8044vw, 3.8031rem)", - "type": "fontSizes" - }, - "f10": { - "value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem))", - "type": "fontSizes" + "web": { + "step-2": { + "value": "clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)", + "type": "fontSizes", + "description": "Small Viewports: 13.72, Large Viewports: 11.89" + }, + "step-1": { + "value": "clamp(0.8619rem, 0.9384rem + -0.0637vw, 0.9256rem)", + "type": "fontSizes", + "description": "Small Viewports: 14.81, Large Viewports: 13.79" + }, + "step0": { + "value": "clamp(1rem, 1rem + 0vw, 1rem)", + "type": "fontSizes", + "description": "Small Viewports: 16, Large Viewports: 16" + }, + "step1": { + "value": "clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)", + "type": "fontSizes", + "description": "Small Viewports: 17.28, Large Viewports: 18.56" + }, + "step2": { + "value": "clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)", + "type": "fontSizes", + "description": "Small Viewports: 18.66, Large Viewports: 21.53" + }, + "step3": { + "value": "clamp(1.26rem, 1.1999rem + 0.3006vw, 1.5606rem)", + "type": "fontSizes", + "description": "Small Viewports: 20.16, Large Viewports: 24.97" + }, + "step4": { + "value": "clamp(1.3606rem, 1.2706rem + 0.45vw, 1.8106rem)", + "type": "fontSizes", + "description": "Small Viewports: 21.77, Large Viewports: 28.97" + }, + "step5": { + "value": "clamp(1.4694rem, 1.3431rem + 0.6313vw, 2.1006rem)", + "type": "fontSizes", + "description": "Small Viewports: 23.51, Large Viewports: 33.61" + }, + "step6": { + "value": "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)", + "type": "fontSizes", + "description": "Small Viewports: 25.39, Large Viewports: 38.98" + }, + "step7": { + "value": "clamp(1.7138rem, 1.4913rem + 1.1125vw, 2.8263rem)", + "type": "fontSizes", + "description": "Small Viewports: 27.42, Large Viewports: 45.22" + }, + "step8": { + "value": "clamp(1.8506rem, 1.5651rem + 1.4275vw, 3.2781rem)", + "type": "fontSizes", + "description": "Small Viewports: 29.61, Large Viewports: 52.45" + }, + "step9": { + "value": "clamp(1.9988rem, 1.6379rem + 1.8044vw, 3.8031rem)", + "type": "fontSizes", + "description": "Small Viewports: 31.98, Large Viewports: 60.85" + }, + "step10": { + "value": "clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem))", + "type": "fontSizes", + "description": "Small Viewports: 34.54, Large Viewports: 70.58" + } } } }