Skip to content

Commit

Permalink
chore: changed the order of tokens for the core brand
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsdeyan
itsdeyan committed Dec 17, 2024
1 parent f545dd4 commit 320e625
Showing 1 changed file with 106 additions and 106 deletions.
212 changes: 106 additions & 106 deletions apps/dictionary/tokens/core/use-case/typography.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,115 @@
"o3": {
"typography": {
"use-case": {
"body-content-base": {
"display-lg": {
"value": {
"fontFamily": "{o3.font.family.georgia}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.7}",
"lineHeight": "{o3.font.lineheight.7}"
},
"type": "typography",
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
"description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
},
"body-content-highlight": {
"display-md": {
"value": {
"fontFamily": "{o3.font.family.georgia}",
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.2}",
"fontSize": "{o3.font.size.6}",
"lineHeight": "{o3.font.lineheight.6}"
},
"type": "typography",
"description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
},
"display-sm": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.5}",
"lineHeight": "{o3.font.lineheight.5}"
},
"type": "typography",
"description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
},
"headline-lg": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.6}",
"lineHeight": "{o3.font.lineheight.6}"
},
"type": "typography",
"description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News)."
},
"headline-md": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.5}",
"lineHeight": "{o3.font.lineheight.5}"
},
"type": "typography",
"description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
},
"headline-sm": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.4}",
"lineHeight": "{o3.font.lineheight.4}"
},
"type": "typography",
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
"description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
},
"body-content-emphasis": {
"title-lg": {
"value": {
"fontFamily": "{o3.font.family.georgia}",
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.semibold}",
"fontSize": "{o3.font.size-metric2.4}",
"lineHeight": "{o3.font.lineheight-metric2.3}"
},
"type": "typography",
"description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints."
},
"title-md": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
"fontSize": "{o3.font.size-metric2.3}",
"lineHeight": "{o3.font.lineheight-metric2.3}"
},
"type": "typography",
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
"description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints."
},
"body-content-link": {
"title-sm": {
"value": {
"fontFamily": "{o3.font.family.georgia}",
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
"lineHeight": "{o3.font.lineheight-metric2.2}",
"fontSize": "{o3.font.size-metric2.2}"
},
"type": "typography",
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
"description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints."
},
"body-base": {
"body-lg": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size-metric2.0}",
"lineHeight": "{o3.font.lineheight-metric2.0}"
"fontSize": "{o3.font.size-metric2.1}",
"lineHeight": "{o3.font.lineheight-metric2.1}"
},
"type": "typography",
"description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline."
"description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description."
},
"body-link": {
"body-base": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size-metric2.0}",
"lineHeight": "{o3.font.lineheight-metric2.0}"
},
"type": "typography",
"description": "Use this style primarily for links in paragraph or as stand alone link."
"description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline."
},
"body-highlight": {
"value": {
Expand All @@ -72,15 +122,15 @@
"type": "typography",
"description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names."
},
"body-lg": {
"body-link": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size-metric2.1}",
"lineHeight": "{o3.font.lineheight-metric2.1}"
"fontSize": "{o3.font.size-metric2.0}",
"lineHeight": "{o3.font.lineheight-metric2.0}"
},
"type": "typography",
"description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description."
"description": "Use this style primarily for links in paragraph or as stand alone link."
},
"detail": {
"value": {
Expand All @@ -92,16 +142,6 @@
"type": "typography",
"description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes."
},
"body-content-dropcap": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "108",
"lineHeight": "108"
},
"type": "typography",
"description": "Use for emphasis on the first letter of an article."
},
"label": {
"value": {
"fontFamily": "{o3.font.family.metric}",
Expand All @@ -113,95 +153,55 @@
"type": "typography",
"description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences."
},
"display-lg": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.7}",
"lineHeight": "{o3.font.lineheight.7}"
},
"type": "typography",
"description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
},
"display-md": {
"body-content-base": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.6}",
"lineHeight": "{o3.font.lineheight.6}"
"fontFamily": "{o3.font.family.georgia}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
},
"type": "typography",
"description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
},
"display-sm": {
"body-content-highlight": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontFamily": "{o3.font.family.georgia}",
"fontWeight": "{o3.font.weight.bold}",
"fontSize": "{o3.font.size.5}",
"lineHeight": "{o3.font.lineheight.5}"
},
"type": "typography",
"description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages."
},
"headline-lg": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.6}",
"lineHeight": "{o3.font.lineheight.6}"
},
"type": "typography",
"description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News)."
},
"headline-md": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.5}",
"lineHeight": "{o3.font.lineheight.5}"
},
"type": "typography",
"description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
},
"headline-sm": {
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.4}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
},
"type": "typography",
"description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
},
"title-lg": {
"body-content-emphasis": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.semibold}",
"fontSize": "{o3.font.size-metric2.4}",
"lineHeight": "{o3.font.lineheight-metric2.3}"
"fontFamily": "{o3.font.family.georgia}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
},
"type": "typography",
"description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints."
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
},
"title-md": {
"body-content-link": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontFamily": "{o3.font.family.georgia}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size-metric2.3}",
"lineHeight": "{o3.font.lineheight-metric2.3}"
"fontSize": "{o3.font.size.2}",
"lineHeight": "{o3.font.lineheight.4}"
},
"type": "typography",
"description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints."
"description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page."
},
"title-sm": {
"body-content-dropcap": {
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"lineHeight": "{o3.font.lineheight-metric2.2}",
"fontSize": "{o3.font.size-metric2.2}"
"fontWeight": "{o3.font.weight.light}",
"fontSize": "108",
"lineHeight": "108"
},
"type": "typography",
"description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints."
"description": "Use for stylistic emphasis on the first letter of an article."
}
}
}
Expand Down

0 comments on commit 320e625

Please sign in to comment.