Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Commit

Permalink
Add body medium font weight (#486)
Browse files Browse the repository at this point in the history 
* Add body medium font weight

* add design-tokens.css

* add JS, docs, and tests

* add storybook items
  • Loading branch information
@garrettbear
garrettbear authored Jun 16, 2023
1 parent 64c4f31 commit 307ff6b
Show file tree
Hide file tree
Showing 7 changed files with 492 additions and 2 deletions.
8 changes: 7 additions & 1 deletion docs/Typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,12 @@ For screens sizes `767px >` or smaller, use the small screen typography scale
| **S HeadingSM Regular** (DEPRECATED) | `typography.sHeadingSMRegular.fontFamily` <br /> `typography.sHeadingSMRegular.fontWeight` <br /> `typography.sHeadingSMRegular.fontSize` <br /> `typography.sHeadingSMRegular.lineHeight` <br /> `typography.sHeadingSMRegular.letterSpacing` | `var(--typography-s-heading-sm-regular-font-family)` <br /> `var(--typography-s-heading-sm-regular-font-weight)`<br /> `var(--typography-s-heading-sm-regular-font-size)` <br /> `var(--typography-s-heading-sm-regular-line-height)` <br /> `var(--typography-s-heading-sm-regular-letter-spacing)` |
| **S BodyLG Medium** | `typography.sBodyLGMedium.fontFamily` <br /> `typography.sBodyLGMedium.fontWeight` <br /> `typography.sBodyLGMedium.fontSize` <br /> `typography.sBodyLGMedium.lineHeight` <br /> `typography.sBodyLGMedium.letterSpacing` | `var(--typography-s-body-lg-medium-font-family)` <br /> `var(--typography-s-body-lg-medium-font-weight)`<br /> `var(--typography-s-body-lg-medium-font-size)` <br /> `var(--typography-s-body-lg-medium-line-height)` <br /> `var(--typography-s-body-lg-medium-letter-spacing)` |
| **S BodyMD Bold** | `typography.sBodyMDBold.fontFamily` <br /> `typography.sBodyMDBold.fontWeight` <br /> `typography.sBodyMDBold.fontSize` <br /> `typography.sBodyMDBold.lineHeight` <br /> `typography.sBodyMDBold.letterSpacing` | `var(--typography-s-body-md-bold-font-family)` <br /> `var(--typography-s-body-md-bold-font-weight)`<br /> `var(--typography-s-body-md-bold-font-size)` <br /> `var(--typography-s-body-md-bold-line-height)` <br /> `var(--typography-s-body-md-bold-letter-spacing)` |
| **S BodyMD Medium** | `typography.sBodyMDMedium.fontFamily` <br /> `typography.sBodyMDMedium.fontWeight` <br /> `typography.sBodyMDMedium.fontSize` <br /> `typography.sBodyMDMedium.lineHeight` <br /> `typography.sBodyMDMedium.letterSpacing` | `var(--typography-s-body-md-bold-font-family)` <br /> `var(--typography-s-body-md-bold-font-weight)`<br /> `var(--typography-s-body-md-bold-font-size)` <br /> `var(--typography-s-body-md-bold-line-height)` <br /> `var(--typography-s-body-md-bold-letter-spacing)` |
| **S BodyMD** | `typography.sBodyMD.fontFamily` <br /> `typography.sBodyMD.fontWeight` <br /> `typography.sBodyMD.fontSize` <br /> `typography.sBodyMD.lineHeight` <br /> `typography.sBodyMD.letterSpacing` | `var(--typography-s-body-md-font-family)` <br /> `var(--typography-s-body-md-font-weight)`<br /> `var(--typography-s-body-md-font-size)` <br /> `var(--typography-s-body-md-line-height)` <br /> `var(--typography-s-body-md-letter-spacing)` |
| **S BodySM Bold** | `typography.sBodySMBold.fontFamily` <br /> `typography.sBodySMBold.fontWeight` <br /> `typography.sBodySMBold.fontSize` <br /> `typography.sBodySMBold.lineHeight` <br /> `typography.sBodySMBold.letterSpacing` | `var(--typography-s-body-sm-bold-font-family)` <br /> `var(--typography-s-body-sm-bold-font-weight)`<br /> `var(--typography-s-body-sm-bold-font-size)` <br /> `var(--typography-s-body-sm-bold-line-height)` <br /> `var(--typography-s-body-sm-bold-letter-spacing)` |
| **S BodySM Medium** | `typography.sBodySMMedium.fontFamily` <br /> `typography.sBodySMMedium.fontWeight` <br /> `typography.sBodySMMedium.fontSize` <br /> `typography.sBodySMMedium.lineHeight` <br /> `typography.sBodySMMedium.letterSpacing` | `var(--typography-s-body-sm-bold-font-family)` <br /> `var(--typography-s-body-sm-bold-font-weight)`<br /> `var(--typography-s-body-sm-bold-font-size)` <br /> `var(--typography-s-body-sm-bold-line-height)` <br /> `var(--typography-s-body-sm-bold-letter-spacing)` |
| **S BodySM** | `typography.sBodySM.fontFamily` <br /> `typography.sBodySM.fontWeight` <br /> `typography.sBodySM.fontSize` <br /> `typography.sBodySM.lineHeight` <br /> `typography.sBodySM.letterSpacing` | `var(--typography-s-body-sm-font-family)` <br /> `var(--typography-s-body-sm-font-weight)`<br /> `var(--typography-s-body-sm-font-size)` <br /> `var(--typography-s-body-sm-line-height)` <br /> `var(--typography-s-body-sm-letter-spacing)` |
| **S BodyXS Medium** | `typography.sBodyXSMedium.fontFamily` <br /> `typography.sBodyXSMedium.fontWeight` <br /> `typography.sBodyXSMedium.fontSize` <br /> `typography.sBodyXSMedium.lineHeight` <br /> `typography.sBodyXSMedium.letterSpacing` | `var(--typography-s-body-xs-font-family)` <br /> `var(--typography-s-body-xs-font-weight)`<br /> `var(--typography-s-body-xs-font-size)` <br /> `var(--typography-s-body-xs-line-height)` <br /> `var(--typography-s-body-xs-letter-spacing)` |
| **S BodyXS** | `typography.sBodyXS.fontFamily` <br /> `typography.sBodyXS.fontWeight` <br /> `typography.sBodyXS.fontSize` <br /> `typography.sBodyXS.lineHeight` <br /> `typography.sBodyXS.letterSpacing` | `var(--typography-s-body-xs-font-family)` <br /> `var(--typography-s-body-xs-font-weight)`<br /> `var(--typography-s-body-xs-font-size)` <br /> `var(--typography-s-body-xs-line-height)` <br /> `var(--typography-s-body-xs-letter-spacing)` |

**NOTE: The JS token format was initially intended for React Native. Therefore, `fontSize` and `lineHeight` use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications.**
Expand All @@ -69,9 +72,12 @@ For screens sizes `768px <` or larger, use the large screen typography scale
| **L HeadingSM Regular** (DEPRECATED) | `typography.lHeadingSMRegular.fontFamily` <br /> `typography.lHeadingSMRegular.fontWeight` <br /> `typography.lHeadingSMRegular.fontSize` <br /> `typography.lHeadingSMRegular.lineHeight` <br /> `typography.lHeadingSMRegular.letterSpacing` | `var(--typography-l-heading-sm-regular-font-family)` <br /> `var(--typography-l-heading-sm-regular-font-weight)`<br /> `var(--typography-l-heading-sm-regular-font-size)` <br /> `var(--typography-l-heading-sm-regular-line-height)` <br /> `var(--typography-l-heading-sm-regular-letter-spacing)` |
| **L BodyLGMedium** | `typography.lBodyLGMedium.fontFamily` <br /> `typography.lBodyLGMedium.fontWeight` <br /> `typography.lBodyLGMedium.fontSize` <br /> `typography.lBodyLGMedium.lineHeight` <br /> `typography.lBodyLGMedium.letterSpacing` | `var(--typography-l-body-large-medium-font-family)` <br /> `var(--typography-l-body-large-medium-font-weight)`<br /> `var(--typography-l-body-large-medium-font-size)` <br /> `var(--typography-l-body-large-medium-line-height)` <br /> `var(--typography-l-body-large-medium-letter-spacing)` |
| **L BodyMD Bold** | `typography.lBodyMDBold.fontFamily` <br /> `typography.lBodyMDBold.fontWeight` <br /> `typography.lBodyMDBold.fontSize` <br /> `typography.lBodyMDBold.lineHeight` <br /> `typography.lBodyMDBold.letterSpacing` | `var(--typography-l-body-md-bold-font-family)` <br /> `var(--typography-l-body-md-bold-font-weight)`<br /> `var(--typography-l-body-md-bold-font-size)` <br /> `var(--typography-l-body-md-bold-line-height)` <br /> `var(--typography-l-body-md-bold-letter-spacing)` |
| **L BodyMD Medium** | `typography.lBodyMDMedium.fontFamily` <br /> `typography.lBodyMDMedium.fontWeight` <br /> `typography.lBodyMDMedium.fontSize` <br /> `typography.lBodyMDMedium.lineHeight` <br /> `typography.lBodyMDMedium.letterSpacing` | `var(--typography-l-body-md-bold-font-family)` <br /> `var(--typography-l-body-md-bold-font-weight)`<br /> `var(--typography-l-body-md-bold-font-size)` <br /> `var(--typography-l-body-md-bold-line-height)` <br /> `var(--typography-l-body-md-bold-letter-spacing)` |
| **L BodyMD** | `typography.lBodyMD.fontFamily` <br /> `typography.lBodyMD.fontWeight` <br /> `typography.lBodyMD.fontSize` <br /> `typography.lBodyMD.lineHeight` <br /> `typography.lBodyMD.letterSpacing` | `var(--typography-l-body-md-font-family)` <br /> `var(--typography-l-body-md-font-weight)`<br /> `var(--typography-l-body-md-font-size)` <br /> `var(--typography-l-body-md-line-height)` <br /> `var(--typography-l-body-md-letter-spacing)` |
| **L BodySMBold** | `typography.lBodySMBold.fontFamily` <br /> `typography.lBodySMBold.fontWeight` <br /> `typography.lBodySMBold.fontSize` <br /> `typography.lBodySMBold.lineHeight` <br /> `typography.lBodySMBold.letterSpacing` | `var(--typography-l-body-sm-bold-font-family)` <br /> `var(--typography-l-body-sm-bold-font-weight)`<br /> `var(--typography-l-body-sm-bold-font-size)` <br /> `var(--typography-l-body-sm-bold-line-height)` <br /> `var(--typography-l-body-sm-bold-letter-spacing)` |
| **L BodySM Bold** | `typography.lBodySMBold.fontFamily` <br /> `typography.lBodySMBold.fontWeight` <br /> `typography.lBodySMBold.fontSize` <br /> `typography.lBodySMBold.lineHeight` <br /> `typography.lBodySMBold.letterSpacing` | `var(--typography-l-body-sm-bold-font-family)` <br /> `var(--typography-l-body-sm-bold-font-weight)`<br /> `var(--typography-l-body-sm-bold-font-size)` <br /> `var(--typography-l-body-sm-bold-line-height)` <br /> `var(--typography-l-body-sm-bold-letter-spacing)` |
| **L BodySM Medium** | `typography.lBodySMMedium.fontFamily` <br /> `typography.lBodySMMedium.fontWeight` <br /> `typography.lBodySMMedium.fontSize` <br /> `typography.lBodySMMedium.lineHeight` <br /> `typography.lBodySMMedium.letterSpacing` | `var(--typography-l-body-sm-bold-font-family)` <br /> `var(--typography-l-body-sm-bold-font-weight)`<br /> `var(--typography-l-body-sm-bold-font-size)` <br /> `var(--typography-l-body-sm-bold-line-height)` <br /> `var(--typography-l-body-sm-bold-letter-spacing)` |
| **L BodySM** | `typography.lBodySM.fontFamily` <br /> `typography.lBodySM.fontWeight` <br /> `typography.lBodySM.fontSize` <br /> `typography.lBodySM.lineHeight` <br /> `typography.lBodySM.letterSpacing` | `var(--typography-l-body-sm-font-family)` <br /> `var(--typography-l-body-sm-font-weight)`<br /> `var(--typography-l-body-sm-font-size)` <br /> `var(--typography-l-body-sm-line-height)` <br /> `var(--typography-l-body-sm-letter-spacing)` |
| **L BodyXS Medium** | `typography.lBodyXSMedium.fontFamily` <br /> `typography.lBodyXSMedium.fontWeight` <br /> `typography.lBodyXSMedium.fontSize` <br /> `typography.lBodyXSMedium.lineHeight` <br /> `typography.lBodyXSMedium.letterSpacing` | `var(--typography-l-body-xs-font-family)` <br /> `var(--typography-l-body-xs-font-weight)`<br /> `var(--typography-l-body-xs-font-size)` <br /> `var(--typography-l-body-xs-line-height)` <br /> `var(--typography-l-body-xs-letter-spacing)` |
| **L BodyXS** | `typography.lBodyXS.fontFamily` <br /> `typography.lBodyXS.fontWeight` <br /> `typography.lBodyXS.fontSize` <br /> `typography.lBodyXS.lineHeight` <br /> `typography.lBodyXS.letterSpacing` | `var(--typography-l-body-xs-font-family)` <br /> `var(--typography-l-body-xs-font-weight)`<br /> `var(--typography-l-body-xs-font-size)` <br /> `var(--typography-l-body-xs-line-height)` <br /> `var(--typography-l-body-xs-letter-spacing)` |

**NOTE: The JS token format was initially intended for React Native. Therefore, `fontSize` and `lineHeight` use integers not REMS or unitless values. Some conversion will need to happen at app level if the JS token format is used for web applications.**
Expand Down
Loading

0 comments on commit 307ff6b

Please sign in to comment.