feat: Introduce and use brand and common typography tokens #1760
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "ams": { | ||
| "brand": { | ||
| "typography": { | ||
| "font-size": { | ||
| "sm": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" }, | ||
|
There was a problem hiding this comment. This grows smaller on desktop. |
||
| "md": { "value": "1rem" }, | ||
| "lg": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" }, | ||
| "xl": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" }, | ||
| "2xl": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" }, | ||
| "3xl": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" }, | ||
| "4xl": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
There was a problem hiding this comment. This is much more focused now: just our selection of font families, sizes and weights, and line heights, with proper names for their options. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| { | ||
| "ams": { | ||
| "brand": { | ||
| "typography": { | ||
| "font-family": { | ||
| "body-text": { "value": "'Amsterdam Sans', Arial, sans-serif" }, | ||
|
There was a problem hiding this comment. Including
|
||
| "headings": { "value": "'Amsterdam Sans', Arial, sans-serif" }, | ||
|
There was a problem hiding this comment. Headings include labels and fieldset legends as well. And accordion buttons use these tokens. |
||
| "monospace": { "value": "monospace" } | ||
|
There was a problem hiding this comment. Might be too soon to add this. There was a problem hiding this comment. If we add a |
||
| }, | ||
| "font-size": { | ||
| "sm": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" }, | ||
| "md": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" }, | ||
| "lg": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" }, | ||
| "xl": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" }, | ||
| "2xl": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" }, | ||
| "3xl": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" }, | ||
| "4xl": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" } | ||
| }, | ||
| "font-weight": { | ||
| "light": { "value": 300 }, | ||
| "normal": { "value": 400 }, | ||
| "bold": { "value": 700 }, | ||
| "x-bold": { "value": 800 } | ||
|
There was a problem hiding this comment. "bolder" might be more common. |
||
| }, | ||
| "line-height": { | ||
|
There was a problem hiding this comment. I’ve calculated this scale precisely like we did for font sizes. I started with 1.66667 for paragraphs and found a factor of 31/32 to generated line heights very close to what we aimed for. The 7 smallest are all used for consecutive heading levels. The 4 largest, creating 1 overlapping, for body text levels. Not all options (e.g. 4xl) have been made available. |
||
| "5xs": { "value": "113.86%" }, | ||
| "4xs": { "value": "117.54%" }, | ||
| "3xs": { "value": "121.33%" }, | ||
| "2xs": { "value": "125.24%" }, | ||
| "xs": { "value": "129.28%" }, | ||
| "sm": { "value": "133.45%" }, | ||
| "md": { "value": "137.76%" }, | ||
| "2xl": { "value": "151.52%" }, | ||
| "5xl": { "value": "166.67%" } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| { | ||
| "ams": { | ||
| "common": { | ||
|
There was a problem hiding this comment. Do we really need this prefix? We don't previx component properties |
||
| "typography": { | ||
| "body-text": { | ||
| "font-family": { "value": "{ams.brand.typography.font-family.body-text}" }, | ||
|
There was a problem hiding this comment. We might need to look at the bundler for the tokens here, because everything is bundled. So you're creating:
Do we need both and how is it more semantic? |
||
| "font-size": { "value": "{ams.brand.typography.font-size.md}" }, | ||
|
There was a problem hiding this comment. This and line height apply to |
||
| "font-weight": { "value": "{ams.brand.typography.font-weight.normal}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.5xl}" }, | ||
| "sm": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.sm}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.2xl}" } | ||
| }, | ||
| "lg": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.lg}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.2xl}" } | ||
| }, | ||
| "xl": { | ||
|
There was a problem hiding this comment. This is a new level for blockquotes because they are not headings. |
||
| "font-size": { "value": "{ams.brand.typography.font-size.xl}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.md}" } | ||
| } | ||
| }, | ||
| "bold": { | ||
|
There was a problem hiding this comment. Not entirely sure about this one. Is a phrase or paragraph of bold text a variation? Badge uses it, for example. And blockquote. Does it make sense to let our future We could also name it ‘emphasis’ and combine it with italics – normal and strong emphasis. |
||
| "font-weight": { "value": "{ams.brand.typography.font-weight.bold}" } | ||
| }, | ||
| "headings": { | ||
| "font-family": { "value": "{ams.brand.typography.font-family.headings}" }, | ||
|
There was a problem hiding this comment. Having two separate tokens for the |
||
| "font-weight": { "value": "{ams.brand.typography.font-weight.x-bold}" }, | ||
| "level-0": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.4xl}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.5xs}" } | ||
| }, | ||
| "level-1": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.3xl}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.4xs}" } | ||
| }, | ||
| "level-2": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.2xl}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.3xs}" } | ||
| }, | ||
| "level-3": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.xl}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.2xs}" } | ||
| }, | ||
| "level-4": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.lg}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.xs}" } | ||
| }, | ||
| "level-5": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.md}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.sm}" } | ||
| }, | ||
| "level-6": { | ||
| "font-size": { "value": "{ams.brand.typography.font-size.sm}" }, | ||
| "line-height": { "value": "{ams.brand.typography.line-height.md}" } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To maintain the history of the file you can use
git mv, just renaming it deletes it and adds a new file.