diff --git a/packages/design-tokens/src/js/global-tokens/typography.ts b/packages/design-tokens/src/js/global-tokens/typography.ts index 541fa3ca9c..a6c3ce31f9 100644 --- a/packages/design-tokens/src/js/global-tokens/typography.ts +++ b/packages/design-tokens/src/js/global-tokens/typography.ts @@ -679,6 +679,406 @@ export const headingXsmallItalic = { }, }; +export const bodyXlargeLight = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeLightItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeMedium = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeSemiboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeBoldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeExtrabold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'normal', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyXlargeExtraboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyLargeLight = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyLargeLightItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyLargeMedium = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyLargeMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyLargeSemiboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyLargeBoldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyLargeExtrabold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyLargeExtraboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '18px', + fontStyle: 'italic', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyMediumLight = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyMediumLightItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyMediumMedium = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyMediumMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyMediumSemiboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyMediumBoldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyMediumExtrabold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyMediumExtraboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '16px', + fontStyle: 'italic', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodySmallLight = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodySmallLightItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodySmallMedium = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodySmallMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodySmallSemiboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodySmallBoldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodySmallExtrabold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'normal', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodySmallExtraboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '14px', + fontStyle: 'italic', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallLight = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 300, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallLightItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 400, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallMedium = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallMediumItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 500, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallSemiboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 600, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallBoldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 700, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallExtrabold = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'normal', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + +export const bodyXsmallExtraboldItalic = { + mobile: { + fontFamily: "'Inter', sans-serif", + fontSize: '12px', + fontStyle: 'italic', + fontWeight: 800, + lineHeight: 1.5, + }, +}; + export const styles = { headingXlargeBold, bodyMediumRegular, @@ -720,4 +1120,44 @@ export const styles = { headingSmallItalic, headingXsmallRegular, headingXsmallItalic, + bodyXlargeLight, + bodyXlargeLightItalic, + bodyXlargeMedium, + bodyXlargeMediumItalic, + bodyXlargeSemiboldItalic, + bodyXlargeBoldItalic, + bodyXlargeExtrabold, + bodyXlargeExtraboldItalic, + bodyLargeLight, + bodyLargeLightItalic, + bodyLargeMedium, + bodyLargeMediumItalic, + bodyLargeSemiboldItalic, + bodyLargeBoldItalic, + bodyLargeExtrabold, + bodyLargeExtraboldItalic, + bodyMediumLight, + bodyMediumLightItalic, + bodyMediumMedium, + bodyMediumMediumItalic, + bodyMediumSemiboldItalic, + bodyMediumBoldItalic, + bodyMediumExtrabold, + bodyMediumExtraboldItalic, + bodySmallLight, + bodySmallLightItalic, + bodySmallMedium, + bodySmallMediumItalic, + bodySmallSemiboldItalic, + bodySmallBoldItalic, + bodySmallExtrabold, + bodySmallExtraboldItalic, + bodyXsmallLight, + bodyXsmallLightItalic, + bodyXsmallMedium, + bodyXsmallMediumItalic, + bodyXsmallSemiboldItalic, + bodyXsmallBoldItalic, + bodyXsmallExtrabold, + bodyXsmallExtraboldItalic, }; diff --git a/packages/design-tokens/src/scss/global-tokens/_typography.scss b/packages/design-tokens/src/scss/global-tokens/_typography.scss index 7aee11303f..6eeb1d4be0 100644 --- a/packages/design-tokens/src/scss/global-tokens/_typography.scss +++ b/packages/design-tokens/src/scss/global-tokens/_typography.scss @@ -679,6 +679,406 @@ $heading-xsmall-italic: ( ), ) !default; +$body-xlarge-light: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-xlarge-light-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-xlarge-medium: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-xlarge-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-xlarge-semibold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xlarge-bold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xlarge-extrabold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: normal, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-xlarge-extrabold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 20px, + font-style: italic, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-large-light: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-large-light-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-large-medium: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-large-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-large-semibold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-large-bold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-large-extrabold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: normal, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-large-extrabold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 18px, + font-style: italic, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-medium-light: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-medium-light-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-medium-medium: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-medium-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-medium-semibold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-medium-bold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-medium-extrabold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: normal, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-medium-extrabold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 16px, + font-style: italic, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-small-light: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-small-light-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-small-medium: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-small-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-small-semibold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-small-bold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-small-extrabold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: normal, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-small-extrabold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 14px, + font-style: italic, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-xsmall-light: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 300, + line-height: 1.5, + ), +) !default; + +$body-xsmall-light-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 400, + line-height: 1.5, + ), +) !default; + +$body-xsmall-medium: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-xsmall-medium-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 500, + line-height: 1.5, + ), +) !default; + +$body-xsmall-semibold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 600, + line-height: 1.5, + ), +) !default; + +$body-xsmall-bold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 700, + line-height: 1.5, + ), +) !default; + +$body-xsmall-extrabold: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: normal, + font-weight: 800, + line-height: 1.5, + ), +) !default; + +$body-xsmall-extrabold-italic: ( + mobile: ( + font-family: "'Inter', sans-serif", + font-size: 12px, + font-style: italic, + font-weight: 800, + line-height: 1.5, + ), +) !default; + $styles: ( heading-xlarge-bold: $heading-xlarge-bold, body-medium-regular: $body-medium-regular, @@ -720,4 +1120,44 @@ $styles: ( heading-small-italic: $heading-small-italic, heading-xsmall-regular: $heading-xsmall-regular, heading-xsmall-italic: $heading-xsmall-italic, + body-xlarge-light: $body-xlarge-light, + body-xlarge-light-italic: $body-xlarge-light-italic, + body-xlarge-medium: $body-xlarge-medium, + body-xlarge-medium-italic: $body-xlarge-medium-italic, + body-xlarge-semibold-italic: $body-xlarge-semibold-italic, + body-xlarge-bold-italic: $body-xlarge-bold-italic, + body-xlarge-extrabold: $body-xlarge-extrabold, + body-xlarge-extrabold-italic: $body-xlarge-extrabold-italic, + body-large-light: $body-large-light, + body-large-light-italic: $body-large-light-italic, + body-large-medium: $body-large-medium, + body-large-medium-italic: $body-large-medium-italic, + body-large-semibold-italic: $body-large-semibold-italic, + body-large-bold-italic: $body-large-bold-italic, + body-large-extrabold: $body-large-extrabold, + body-large-extrabold-italic: $body-large-extrabold-italic, + body-medium-light: $body-medium-light, + body-medium-light-italic: $body-medium-light-italic, + body-medium-medium: $body-medium-medium, + body-medium-medium-italic: $body-medium-medium-italic, + body-medium-semibold-italic: $body-medium-semibold-italic, + body-medium-bold-italic: $body-medium-bold-italic, + body-medium-extrabold: $body-medium-extrabold, + body-medium-extrabold-italic: $body-medium-extrabold-italic, + body-small-light: $body-small-light, + body-small-light-italic: $body-small-light-italic, + body-small-medium: $body-small-medium, + body-small-medium-italic: $body-small-medium-italic, + body-small-semibold-italic: $body-small-semibold-italic, + body-small-bold-italic: $body-small-bold-italic, + body-small-extrabold: $body-small-extrabold, + body-small-extrabold-italic: $body-small-extrabold-italic, + body-xsmall-light: $body-xsmall-light, + body-xsmall-light-italic: $body-xsmall-light-italic, + body-xsmall-medium: $body-xsmall-medium, + body-xsmall-medium-italic: $body-xsmall-medium-italic, + body-xsmall-semibold-italic: $body-xsmall-semibold-italic, + body-xsmall-bold-italic: $body-xsmall-bold-italic, + body-xsmall-extrabold: $body-xsmall-extrabold, + body-xsmall-extrabold-italic: $body-xsmall-extrabold-italic, ) !default;