@marioschmidt/design-system-tokens 1.0.24 → 1.0.26

package/dist/flutter/brands/advertorial/semantic/typography/typography-sm.dart

@@ -1,147 +1,1069 @@
 
 //
-// typography-sm.dart
+// typography-compact.dart
 //
 
 // Do not edit directly, this file was auto-generated.
 
 
-
 import 'dart:ui';
 
-class TypographyAdvertorialSM {
-    TypographyAdvertorialSM._();
-
-    static const accordionAccordionlabel = [object Object]; /** This text style is for use on accordion labels */
-    static const articleArticleheadline = [object Object]; /** This component level text style is reserved for article page headline texts that show up at the top of article pages. This text style references the generic text styles headline1 and headline2 font size variables. 40 - 40 - 72 - 100 */
-    static const articleArticleimagecaption = [object Object]; /** This text style is used on image captions that show up in article pages only. */
-    static const articleArticlekicker = [object Object]; /** This text style contains the variables necessary for setting how the font parameters for the article kicker behaves across breakpoints. For font size, this component level token currently references the semantic level token kicker1FontSize. */
-    static const articleArticlemetasource = [object Object]; /** This text style is used on short pieces of text that give information about where an image originated. It can also be used on short texts that give information about where a video originated. */
-    static const articleArticletimestamp = [object Object]; /** Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
-    static const ateaserAteaserheadline = [object Object]; /** This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
-    static const ateaserAteaserkicker = [object Object]; /** 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
-    static const audioplayerAudioplayerlabel = [object Object]; /** This text style is used on audio player labels for elapsed time, reproduction speed and short functionality description text. Font size: 16 - 16 - 16 - 18 */
-    static const avatarAppavatar = [object Object]; /** This text style is used for avatar on iOS & Android apps. 12 - 12 - 14 - 16 */
-    static const /**
- * This text style is used on article page avatar name labels in their default state. Font size: 16 - 16 - 16 - 18
- * 
- * 09-2025, on large devices this component uses the css var --footnote-font-size-lg at 1024px bp changes to --footnote-font-size-sm
- */
-avatarAvatardefault = [object Object];
-    static const avatarAvatarhover = [object Object]; /** This text style is used on avatars that appear in article pages. Font size: 16 - 16 - 16 - 18 */
-    static const avatarAvatarsecondaryinfo = [object Object]; /** This text style is used on avatars that show up on article pages. Some avatars have the individual's first and last name on a single line. The second line of the avatar label is then used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
-    static const avatarAvatarsecondaryinfohover = [object Object]; /** This text style is used for the active state of the second line of avatar labels. This label text is used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
-    static const badgesVideoadbadge = [object Object]; /** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during horizontal video advertisements. */
-    static const badgesVideotimebadge = [object Object]; /** This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
-    static const bodyBody = [object Object]; /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-    static const bodyBodybold = [object Object]; /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-    static const bodyBodybolditalic = [object Object]; /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-    static const bodyBodyitalic = [object Object]; /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
-    static const breadcrumbBreadcrumb = [object Object]; /** This text style is used for the last items in a breadcrumbs chain. It is commonly used in article pages and is a h1 in html. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-    static const breadcrumbBreadcrumblink = [object Object]; /** This text style is used for breadcrumb links that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-    static const breadcrumbBreadcrumblinkhover = [object Object]; /** This text style is used for the hover state of breadcrumbs that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
-    static const breakingnewsBreakingnewslowertitle = [object Object]; /** Use this font style on the breaking news badge's lower title. Font size constant 23. */
-    static const breakingnewsBreakingnewstext = [object Object]; /** Use this text style on breaking news headlines that horizontally scroll in the breaking news animated strip. Font size constant 21. */
-    static const breakingnewsBreakingnewsuppertitle = [object Object]; /** Use this text style on the upper title of the breaking news headline strip. Font size constant 13. */
-    static const buttonButtonlabel = [object Object]; /** This text style is used on button labels. Its font size variable is currently in the Density collection. Font size changes across devices: 15 - 17 - 19 Current online CSS .btn--narrow & .btn */
-    static const buttonPartnerlinkbuttonlabel = [object Object]; /** This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content.  Font size: 16 - 16 - 16 - 18 */
-    static const calloutCallout = [object Object]; /** Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
-    static const chipsChipslabel = [object Object]; /** This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
-    static const displayDisplay1 = [object Object]; /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
-    static const displayDisplay2 = [object Object]; /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
-    static const displayDisplay3 = [object Object]; /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
-    static const dsdocsstylesBilddesignsidemenu = [object Object]; /** This text style is only used for mockup pages of the design system website. */
-    static const dsdocsstylesBilddesignsidemenuactive = [object Object]; /** This text style is only used for mockup pages of the design system website. */
-    static const dsdocsstylesBilddesignsidemenuhover = [object Object]; /** This text style is only used for mockup pages of the design system website. */
-    static const dsdocsstylesCodesnippets = [object Object]; /** This text style is only used on the design system's documentation for code syntax snippets. */
-    static const dsdocsstylesPageheaderdescription = [object Object];
-    static const dsdocsstylesTokenspecl = [object Object]; /** This text style is used on documentation pages that contain some token information. */
-    static const dsdocsstylesVerticalvideosmockheadlines = [object Object]; /** This text style is only used for mockups the vertical video component teaser headlines. */
-    static const footerFootercardlink = [object Object]; /** This text style is used for link texts contained inside cards that commonly show up at the bottom of pages in footers. This link text style's font size parameter uses the label2 font size variable. */
-    static const footerFooterlinks = [object Object]; /** This text style is used in footer links that show up at the bottom of content pages. Font size constant at 11px. */
-    static const footerFooterlinkseparator = [object Object]; /** This text style is found on footers that separate links with a vertical bar. Font size remains constant at 20 px across devices. */
-    static const footerFooterlinkuserOfferpages = [object Object]; /** User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
-    static const footnoteFootnote1 = [object Object]; /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
-    static const footnoteFootnote1bold = [object Object]; /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
-    static const footnoteFootnote2 = [object Object]; /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-    static const footnoteFootnote2bold = [object Object]; /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
-    static const headlineHeadline1 = [object Object]; /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
-    static const headlineHeadline2 = [object Object]; /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
-    static const headlineHeadline3 = [object Object]; /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
-    static const headlineHeadline4 = [object Object]; /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
-    static const inputfieldTextinputfieldlabel = [object Object]; /** This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
-    static const kickerKicker1 = [object Object]; /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
-    static const kickerKicker2 = [object Object]; /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
-    static const kickerKicker3 = [object Object]; /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
-    static const kickerKicker4 = [object Object]; /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
-    static const labelLabel1 = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-    static const labelLabel1bold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-    static const labelLabel1boldresp = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
-    static const labelLabel1uppercasebold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
-    static const labelLabel2 = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-    static const labelLabel2bold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-    static const labelLabel2uppercase = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
-    static const labelLabel2uppercasebold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
-    static const labelLabel3 = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-    static const labelLabel3bold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-    static const labelLabel3uppercase = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
-    static const labelLabel3uppercasebold = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
-    static const labelLabel4 = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
-    static const livetickerLivetickerheadline = [object Object]; /** This text style is used on live ticker headlines. The font size changes between device sizes. 22 - 22 - 32 -32 */
-    static const livetickerLivetickertimestamp = [object Object]; /** Use this text style on the live ticker time stamps. 14 - 14 - 16 - 16 */
-    static const mediaplayersPodcastplayerlabel = [object Object]; /** This text style is used on controller labels of the podcast media player. Font size: 16 - 16 - 16 - 18 */
-    static const mediaplayersVideoadtime = [object Object]; /** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during the video advertisement. */
-    static const mediaplayersVideoplayertime = [object Object]; /** Use this text style on video player time badges that display elapsed, total or live information text labels. This text style references the label2 font size variable. 15px constant */
-    static const menuApptopbarstagetitle = [object Object]; /** This text style is used on a small title that is placed above tab elements that are seen on iOS and Android top menu bar. */
-    static const menuApptopbartabstitle = [object Object]; /** iOS and Android apps currently have a top bar with tabs that when selected display different content within the main view of the device. This text style is used for a title text that provides information for the user to situate where they are within the app's content possibilities. */
-    static const menuMenuitemlabel = [object Object]; /** Used on menu link lane items and on mobile side menu drawer. Current online CSS naming: --nav-btn */
-    static const menuMenuitemutillabel = [object Object]; /** Use this tokenized font style for menu items with icons that are more important than the menu link lane items. Current online CSS: .nav_btn--type-util */
-    static const /**
- * This component level text style references the semantic level text sizes of headline3 and headline4.
- * XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40
- */
-mqteaserMqteaserheadline = [object Object];
-    static const mqteaserMqteaserkicker = [object Object]; /** This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
-    static const newstickerNewstickerheadline = [object Object]; /** This text style is used on NewsTicker Headlines. It references the semantic level text style headline3. 28 - 28 - 36 - 40 */
-    static const newstickerNewstickerkicker = [object Object]; /** This text style is a component level option for the newsticker kicker. Currently the newsticker kicker uses the semantic text style kicker3. This text style references the semantic one. */
-    static const newstickerNewstickertimestamp = [object Object]; /** The vertical newsticker component has timestamps that use this text style. 16 - 16 - 16 - 18 */
-    static const paginationNumberedpaginationactive = [object Object]; /** This component level text style stores the variables for the pagination component's active state (label1 with red accent color underline). Its size remains constant at 17px across device sizes. */
-    static const paywallPaywallcardnote = [object Object]; /** This text style is used on the paywall card under the price value. */
-    static const paywallPaywallcardpricetag = [object Object]; /** This text style is used for the paywall price tag text. */
-    static const qteaserQteaserheadline = [object Object]; /** This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
-    static const quoteQuote = [object Object]; /** Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
-    static const specialnaviSpecianaviitemlabel = [object Object]; /** Used on menu link lane items and on mobile side menu drawer. */
-    static const specsSpecsl = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsm = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsml = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsms = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecss = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsxl = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsxs = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const specsSpecsxxl = [object Object]; /** This text style is only used for audit pages of the design system. */
-    static const stdteaserStdteaserheadline = [object Object]; /** Standard teasers typography changes more than other teasers. On desktop they have a kicker, a headline and a short text. On mobile devices the short text is eliminated and the headline gains weight at device widths 600px. Then at small mobile sizes the weight drops once again. */
-    static const subheadlineSubheadline1 = [object Object]; /** This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
-    static const tabsAppbottombarlabelactive = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-    static const tabsAppbottombarlabeldefault = [object Object]; /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
-    static const tabsTablabel = [object Object]; /** This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
-    static const textlinkTextlink = [object Object]; /** Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
-    static const textlinkTextlinkbold = [object Object]; /** Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
-    static const textlinkTextlinkboldhover = [object Object]; /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-    static const textlinkTextlinkhover = [object Object]; /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
-    static const textlinkTextlinkitalic = [object Object]; /** Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
-    static const titleTitle1 = [object Object]; /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-    static const titleTitle1uppercase = [object Object]; /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
-    static const /**
- * Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
- * 
- * In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20
- */
-titleTitle2 = [object Object];
-    static const /**
- * Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
- * 
- * In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20
- */
-titleTitle2uppercase = [object Object];
-    static const toggleswitchesApptoogleitemlabel = [object Object]; /** This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
-}
+class TypographyAdvertorialCompact {
+    TypographyAdvertorialCompact._();
+
+    // ============================================
+    // DISPLAY
+    // ============================================
+
+    /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
+    static const display1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '39px',
+      'lineHeight': '40px',
+      'letterSpacing': '-0.5px',
+    };
+    /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
+    static const display2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '35px',
+      'lineHeight': '36px',
+      'letterSpacing': '-0.5px',
+    };
+    /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
+    static const display3 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '27px',
+      'lineHeight': '28px',
+      'letterSpacing': '-0.5px',
+    };
+
+    // ============================================
+    // HEADLINE
+    // ============================================
+
+    /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 48 - 48 - 72 - 100 */
+    static const headline1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '36px',
+      'lineHeight': '37.79999923706055px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's token for the font size parameter changes across device sizes as follows: 40 - 40 - 48 - 64 */
+    static const headline2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '30px',
+      'lineHeight': '33px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. This text style's font size parameter is controlled by the headline3FontSize token: 28 - 28 - 36 - 40 */
+    static const headline3 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '24px',
+      'lineHeight': '26.399999618530273px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** Headlines structure content into clear sections. They are prominent but more versatile than Display styles, used across articles, teasers and modules. Font size: 22 - 22 - 26 - 32 */
+    static const headline4 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '16px',
+      'letterSpacing': '0px',
+      'fontStyle': '600',
+    };
+
+    // ============================================
+    // SUBHEADLINE
+    // ============================================
+
+    /** This Subheadlines text style is used in articles. They are placed under the headline at the top of an article. Subheadlines can appear in some teasers also. Font size: 24 - 24 - 32 - 36 */
+    static const subheadline1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '18px',
+      'lineHeight': '23.399999618530273px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // KICKER
+    // ============================================
+
+    /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 30 --//*//-- currently css uses kicker0 for the naming of this text style and sequence of font size changes */
+    static const kicker1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '17.600000381469727px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 18 - 18 - 22 - 24 --//*//-- currently css uses kicker1 for the naming of this text style and sequence of font size changes */
+    static const kicker2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '17.600000381469727px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 16 - 16 - 18 - 20 --//*//-- currently css uses kicker2 for the naming of this text style and sequence of font size changes */
+    static const kicker3 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '14px',
+      'lineHeight': '15.399999618530273px',
+      'fontStyle': '700',
+    };
+    /** Kickers are short introductory lines placed above a headline to provide context, category, or emphasis. They support content orientation. Font size: 14 - 14 - 16 - 16 --//*//-- currently css uses kicker3 for the naming of this text style and sequence of font size changes */
+    static const kicker4 = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '12px',
+      'lineHeight': '13.199999809265137px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // TITLE
+    // ============================================
+
+    /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+    static const title1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '22px',
+      'lineHeight': '26.399999618530273px',
+      'letterSpacing': '0px',
+    };
+    /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. Font size: 22 - 22 - 22 - 28 */
+    static const title1uppercase = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '22px',
+      'lineHeight': '26.399999618530273px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+    /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+    static const title2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '14px',
+      'lineHeight': '16.799999237060547px',
+      'letterSpacing': '0px',
+    };
+    /** Title styles are mid-level headings, often used for module names, card headers, or section labels. They balance prominence with readability. 
+
+In the previous system, this style was named Caption. For greater clarity and consistency, it has been renamed to title2. Font size: 16 - 16 - 18 - 20 */
+    static const title2uppercase = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '14px',
+      'lineHeight': '16.799999237060547px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+
+    // ============================================
+    // CALLOUT
+    // ============================================
+
+    /** Callouts highlight key information, quotes, or important notes inside content. They stand apart from body text to draw attention. There is overlap between this text style and the title text styles. Font size: 18 - 18 - 22 - 22 */
+    static const callout = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '16px',
+      'lineHeight': '20.799999237060547px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // BODY
+    // ============================================
+
+    /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+    static const body = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+    };
+    /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+    static const bodyitalic = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+    };
+    /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+    static const bodybold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+    };
+    /** Body styles are the default for running text. They prioritize readability and are optimized for long-form content across devices. Font size remains constant at 21 across device sizes. */
+    static const bodybolditalic = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // TEXTLINK
+    // ============================================
+
+    /** Use this text style for styling elements that are clickable text links inside body texts. This style is often found in article texts. Font size remains constant at 21 across device sizes. */
+    static const textlink = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** Use this text style for styling elements that are clickable text links inside body texts that are using the italic style. This style is often found in article texts that need to show contrast for publications titles, specific words or names. Font size remains constant at 21 across device sizes. */
+    static const textlinkitalic = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** Use this text style for styling elements that are clickable text links inside emphasized body texts that are using the bold or html strong style. This style is often found in article texts that need to show contrast for specific words or names. Font size remains constant at 21 across device sizes. */
+    static const textlinkbold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+    static const textlinkhover = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** Use this style for body text links or other text links that are in active state. Font size remains constant at 21 across device sizes. */
+    static const textlinkboldhover = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '29.75px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+
+    // ============================================
+    // FOOTNOTE
+    // ============================================
+
+    /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This specific style is commonly used on small two lines of text that are seen on standard teasers. The font size of this text style is similar to the label text style. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 16 - 16 - 16 - 18 */
+    static const footnote1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '13px',
+      'lineHeight': '16.899999618530273px',
+      'letterSpacing': '0px',
+    };
+    /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. 16 - 16 - 16 - 18 */
+    static const footnote1bold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '13px',
+      'lineHeight': '16.899999618530273px',
+      'letterSpacing': '0px',
+    };
+    /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+    static const footnote2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '10px',
+      'lineHeight': '13px',
+      'letterSpacing': '0px',
+    };
+    /** Footnotes are used for disclaimers, annotations, or secondary details. They are small in size and carry low visual weight. This text style should be chosen when longer small descriptive texts in a small font size is needed where as the label text style should be used for shorter identifier texts. Font size: 12 - 12 - 12 - 16 */
+    static const footnote2bold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '10px',
+      'lineHeight': '13px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // LABEL
+    // ============================================
+
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+    static const label1 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '17px',
+      'lineHeight': '20.399999618530273px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+    static const label1bold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '20.399999618530273px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
+    static const label1boldresp = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '10px',
+      'lineHeight': '10px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
+    static const label1uppercasebold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '20.399999618530273px',
+      'letterSpacing': '0.5px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+    static const label2 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '15px',
+      'lineHeight': '16px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+    static const label2uppercase = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '15px',
+      'lineHeight': '16px',
+      'letterSpacing': '0.25px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 15 across device sizes. */
+    static const label2bold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '15px',
+      'lineHeight': '16px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This style used on special navi component simiiar to link lane menu items. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. The font size value remains constant at 15 across device sizes. */
+    static const label2uppercasebold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '15px',
+      'lineHeight': '16px',
+      'letterSpacing': '0.25px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+    static const label3 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. Current online CSS .nav_btn--type-list & .nav_btn__text // --nav-btn */
+    static const label3uppercase = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0.5px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+    static const label3bold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0.25px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 12 across device sizes. */
+    static const label3uppercasebold = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0.5px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 8. */
+    static const label4 = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '8px',
+      'lineHeight': '10px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // QUOTE
+    // ============================================
+
+    /** Use this text style for sections of text that are inside a fieldset with a quotation given by a person in an interview or a section of text from a larger body of text that need to be emphasized. */
+    static const quote = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '16px',
+      'lineHeight': '20.799999237060547px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // ACCORDION
+    // ============================================
+
+    /** This text style is for use on accordion labels */
+    static const accordionlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // ARTICLE
+    // ============================================
+
+    /** This text style contains the variables necessary for setting how the font parameters for the article kicker behaves across breakpoints. For font size, this component level token currently references the semantic level token kicker1FontSize. */
+    static const articlekicker = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '17.600000381469727px',
+      'fontStyle': '700',
+    };
+    /** This text style is used on image captions that show up in article pages only. */
+    static const articleimagecaption = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '13px',
+      'lineHeight': '19.5px',
+      'letterSpacing': '0px',
+    };
+    /** This component level text style is reserved for article page headline texts that show up at the top of article pages. This text style references the generic text styles headline1 and headline2 font size variables. 40 - 40 - 72 - 100 */
+    static const articleheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '30px',
+      'lineHeight': '30px',
+      'fontStyle': '700',
+    };
+    /** This text style is used on short pieces of text that give information about where an image originated. It can also be used on short texts that give information about where a video originated. */
+    static const articlemetasource = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '13px',
+      'lineHeight': '19px',
+    };
+    /** Use this text style for time and day text string that commonly shows up along with the article authors avatars. Font size: 12 - 12 - 14 - 16 */
+    static const articletimestamp = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '12px',
+    };
+
+    // ============================================
+    // AUDIOPLAYER
+    // ============================================
+
+    /** This text style is used on audio player labels for elapsed time, reproduction speed and short functionality description text. Font size: 16 - 16 - 16 - 18 */
+    static const audioplayerlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '16px',
+      'lineHeight': '16px',
+    };
+
+    // ============================================
+    // AVATAR
+    // ============================================
+
+    /** This text style is used for avatar on iOS & Android apps. 12 - 12 - 14 - 16 */
+    static const appavatar = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '12px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+    /** This text style is used on article page avatar name labels in their default state. Font size: 16 - 16 - 16 - 18
+
+09-2025, on large devices this component uses the css var --footnote-font-size-lg at 1024px bp changes to --footnote-font-size-sm */
+    static const avatardefault = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '13px',
+      'lineHeight': '21px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is used on avatars that appear in article pages. Font size: 16 - 16 - 16 - 18 */
+    static const avatarhover = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '13px',
+      'lineHeight': '21px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** This text style is used on avatars that show up on article pages. Some avatars have the individual's first and last name on a single line. The second line of the avatar label is then used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
+    static const avatarsecondaryinfo = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '13px',
+      'lineHeight': '21px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is used for the active state of the second line of avatar labels. This label text is used for secondary information such as the location of the individual in the world. 16 - 16 - 16 - 18 */
+    static const avatarsecondaryinfohover = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '13px',
+      'lineHeight': '21px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+
+    // ============================================
+    // BADGES
+    // ============================================
+
+    /** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during horizontal video advertisements. */
+    static const videoadbadge = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+      'fontSize': '14px',
+      'textTransform': 'upper',
+    };
+    /** This text style is used on horizontal video badges that contain either the video's total duration or a live status identifier. Font size: 16 - 16 - 18 - 18 */
+    static const videotimebadge = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '16px',
+      'lineHeight': '21px',
+    };
+
+    // ============================================
+    // BREADCRUMB
+    // ============================================
+
+    /** This text style is used for the last items in a breadcrumbs chain. It is commonly used in article pages and is a h1 in html. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+    static const breadcrumb = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is used for breadcrumb links that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+    static const breadcrumblink = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+    /** This text style is used for the hover state of breadcrumbs that are commonly used in article pages. This text style's font size parameter is controlled by the breadcrumbFontSize variable. 15 - 15 - 15 - 12. Breadcrumb labels are smaller on largest devices. */
+    static const breadcrumblinkhover = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0px',
+      'textDecoration': 'underline',
+    };
+
+    // ============================================
+    // BREAKINGNEWS
+    // ============================================
+
+    /** Use this text style on breaking news headlines that horizontally scroll in the breaking news animated strip. Font size constant 21. */
+    static const breakingnewstext = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '21px',
+      'lineHeight': '24px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+    /** Use this text style on the upper title of the breaking news headline strip. Font size constant 13. */
+    static const breakingnewsuppertitle = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '13px',
+      'lineHeight': '13px',
+      'letterSpacing': '0px',
+    };
+    /** Use this font style on the breaking news badge's lower title. Font size constant 23. */
+    static const breakingnewslowertitle = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '23px',
+      'lineHeight': '21px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // BUTTON
+    // ============================================
+
+    /** This text style is used on button labels. Its font size variable is currently in the Density collection. Font size changes across devices: 15 - 17 - 19 Current online CSS .btn--narrow & .btn */
+    static const buttonlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0.5px',
+      'fontStyle': '600',
+      'textTransform': 'upper',
+    };
+    /** This text style is used on buttons that are commonly used inside of a container for advertizers and partners. This text is used in buttons that open links to external content.  Font size: 16 - 16 - 16 - 18 */
+    static const partnerlinkbuttonlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '16px',
+      'lineHeight': '16px',
+    };
+
+    // ============================================
+    // CHIPS
+    // ============================================
+
+    /** This text style is used on the chips component. They are commonly used for filtering parameters. font size: 16 - 16 - 16 - 18 */
+    static const chipslabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '16px',
+    };
+
+    // ============================================
+    // FOOTER
+    // ============================================
+
+    /** This text style is used for link texts contained inside cards that commonly show up at the bottom of pages in footers. This link text style's font size parameter uses the label2 font size variable. */
+    static const footercardlink = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+      'fontSize': '15px',
+      'textDecoration': 'underline',
+    };
+    /** This text style is found on footers that separate links with a vertical bar. Font size remains constant at 20 px across devices. */
+    static const footerlinkseparator = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+    };
+    /** This text style is used in footer links that show up at the bottom of content pages. Font size constant at 11px. */
+    static const footerlinks = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 700,
+      'fontSize': '11px',
+      'lineHeight': '14px',
+      'letterSpacing': '0px',
+    };
+    /** User data and offer pages use this text style on footer links. Font size remains constant at 18px. */
+    static const footerlinkuserOfferpages = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+      'fontSize': '18px',
+      'lineHeight': '26px',
+    };
+
+    // ============================================
+    // INPUTFIELD
+    // ============================================
+
+    /** This text style is used in dropdowns and other text input fields such as date inputs, search input fields and other inputs for text found in forms for example. Font size references a variable from the density collection. 15 - 17 - 19 */
+    static const textinputfieldlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '16px',
+      'lineHeight': '16px',
+    };
+
+    // ============================================
+    // LIVETICKER
+    // ============================================
+
+    /** This text style is used on live ticker headlines. The font size changes between device sizes. 22 - 22 - 32 -32 */
+    static const livetickerheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 600,
+      'fontSize': '22px',
+      'lineHeight': '22px',
+      'letterSpacing': '0px',
+    };
+    /** Use this text style on the live ticker time stamps. 14 - 14 - 16 - 16 */
+    static const livetickertimestamp = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 700,
+      'fontSize': '14px',
+      'lineHeight': '14px',
+    };
+
+    // ============================================
+    // MEDIAPLAYERS
+    // ============================================
+
+    /** This text style is used on controller labels of the podcast media player. Font size: 16 - 16 - 16 - 18 */
+    static const podcastplayerlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '16px',
+      'lineHeight': '16px',
+    };
+    /** 14 - 14 - 16 - 16 -- This text style is specific to the video horizontal player's ad badge that shows up next to the yellow progress bar that plays during the video advertisement. */
+    static const videoadtime = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 800,
+      'fontSize': '14px',
+      'textTransform': 'upper',
+    };
+    /** Use this text style on video player time badges that display elapsed, total or live information text labels. This text style references the label2 font size variable. 15px constant */
+    static const videoplayertime = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '14px',
+      'textTransform': 'upper',
+    };
+
+    // ============================================
+    // MENU
+    // ============================================
+
+    /** This text style is used on a small title that is placed above tab elements that are seen on iOS and Android top menu bar. */
+    static const apptopbarstagetitle = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '12px',
+      'lineHeight': '14px',
+      'letterSpacing': '0px',
+    };
+    /** iOS and Android apps currently have a top bar with tabs that when selected display different content within the main view of the device. This text style is used for a title text that provides information for the user to situate where they are within the app's content possibilities. */
+    static const apptopbartabstitle = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '12px',
+      'lineHeight': '14px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+    /** Used on menu link lane items and on mobile side menu drawer. Current online CSS naming: --nav-btn */
+    static const menuitemlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+      'textTransform': 'upper',
+    };
+    /** Use this tokenized font style for menu items with icons that are more important than the menu link lane items. Current online CSS: .nav_btn--type-util */
+    static const menuitemutillabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '12px',
+      'lineHeight': '12px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+      'textTransform': 'upper',
+    };
+
+    // ============================================
+    // NEWSTICKER
+    // ============================================
+
+    /** The vertical newsticker component has timestamps that use this text style. 16 - 16 - 16 - 18 */
+    static const newstickertimestamp = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '16px',
+      'lineHeight': '20.799999237060547px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is a component level option for the newsticker kicker. Currently the newsticker kicker uses the semantic text style kicker3. This text style references the semantic one. */
+    static const newstickerkicker = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '14px',
+      'lineHeight': '15.399999618530273px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is used on NewsTicker Headlines. It references the semantic level text style headline3. 28 - 28 - 36 - 40 */
+    static const newstickerheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '24px',
+      'lineHeight': '26.399999618530273px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // PAGINATION
+    // ============================================
+
+    /** This component level text style stores the variables for the pagination component's active state (label1 with red accent color underline). Its size remains constant at 17px across device sizes. */
+    static const numberedpaginationactive = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '17px',
+      'lineHeight': '20.399999618530273px',
+      'letterSpacing': '0.25px',
+      'textDecoration': 'underline',
+    };
+
+    // ============================================
+    // PAYWALL
+    // ============================================
+
+    /** This text style is used for the paywall price tag text. */
+    static const paywallcardpricetag = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '64px',
+      'lineHeight': '64px',
+      'letterSpacing': '-0.5px',
+    };
+    /** This text style is used on the paywall card under the price value. */
+    static const paywallcardnote = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '40px',
+      'lineHeight': '40px',
+      'letterSpacing': '-0.5px',
+    };
+
+    // ============================================
+    // SPECIALNAVI
+    // ============================================
+
+    /** Used on menu link lane items and on mobile side menu drawer. */
+    static const specianaviitemlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '15px',
+      'lineHeight': '15px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // TABS
+    // ============================================
+
+    /** This text style stores variables for the tab component. Tabs are similar to submenus and special navigation elements but tabs do not link to other URLs. */
+    static const tablabel = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 700,
+      'fontSize': '16px',
+      'textTransform': 'upper',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+    static const appbottombarlabeldefault = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 400,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0px',
+    };
+    /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. */
+    static const appbottombarlabelactive = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'fontSize': '12px',
+      'lineHeight': '14.399999618530273px',
+      'letterSpacing': '0px',
+    };
+
+    // ============================================
+    // ATEASER
+    // ============================================
+
+    /** 16 - 16 - 22 - 24 | This text style currently uses two different semantic styles within it, the kicker3 for XS & S, and kicker2 for MD & LG */
+    static const ateaserkicker = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '14px',
+      'lineHeight': '14px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** This text style references the semantic text styles headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64 */
+    static const ateaserheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '24px',
+      'lineHeight': '24px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // MQTEASER
+    // ============================================
+
+    /** This component level text style references size variables for the semantic level. Specifically kicker4. 14 - 14 - 16 - 16 */
+    static const mqteaserkicker = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '12px',
+      'lineHeight': '13.199999809265137px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+    /** This component level text style references the semantic level text sizes of headline3 and headline4.
+XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40 */
+    static const mqteaserheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '18.399999618530273px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // QTEASER
+    // ============================================
+
+    /** This component level text style is used on the quad teaser headline. Its font size parameter references the semantic level variable headline1. 48 - 48 - 72 - 100 */
+    static const qteaserheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '36px',
+      'lineHeight': '37.79999923706055px',
+      'letterSpacing': '0px',
+      'fontStyle': '700',
+    };
+
+    // ============================================
+    // STDTEASER
+    // ============================================
+
+    /** Standard teasers typography changes more than other teasers. On desktop they have a kicker, a headline and a short text. On mobile devices the short text is eliminated and the headline gains weight at device widths 600px. Then at small mobile sizes the weight drops once again. */
+    static const stdteaserheadline = {
+      'fontFamily': 'Lucida Grande',
+      'fontSize': '16px',
+      'lineHeight': '18.399999618530273px',
+      'letterSpacing': '0px',
+      'fontStyle': '600',
+    };
+
+    // ============================================
+    // TOGGLESWITCHES
+    // ============================================
+
+    /** This text style is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18 */
+    static const apptoogleitemlabel = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 800,
+      'fontSize': '14px',
+      'lineHeight': '14.100000381469727px',
+      'letterSpacing': '0px',
+      'textTransform': 'upper',
+    };
+
+    // ============================================
+    // .DSDOCSSTYLES
+    // ============================================
+
+    static const pageheaderdescription = {
+      'fontFamily': 'Lucida Grande',
+      'fontWeight': 700,
+      'letterSpacing': '0px',
+    };
+    /** This text style is only used on the design system's documentation for code syntax snippets. */
+    static const codesnippets = {
+      'fontFamily': 'Source Code Pro',
+      'fontSize': '10px',
+      'lineHeight': '13px',
+      'letterSpacing': '0px',
+    };
+    /** This text style is only used for mockup pages of the design system website. */
+    static const bilddesignsidemenu = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+    };
+    /** This text style is only used for mockup pages of the design system website. */
+    static const bilddesignsidemenuactive = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 400,
+      'textDecoration': 'underline',
+    };
+    /** This text style is only used for mockup pages of the design system website. */
+    static const bilddesignsidemenuhover = {
+      'fontFamily': 'Gotham XNarrow',
+      'fontWeight': 600,
+    };
+    /** This text style is only used for mockups the vertical video component teaser headlines. */
+    static const verticalvideosmockheadlines = {
+      'fontFamily': 'Gotham Condensed',
+      'fontWeight': 600,
+      'fontSize': '22px',
+      'lineHeight': '22px',
+      'textDecoration': 'underline',
+    };
+    /** This text style is used on documentation pages that contain some token information. */
+    static const tokenspecl = {
+      'fontFamily': 'Source Code Pro',
+    };
+
+    // ============================================
+    // .SPECS
+    // ============================================
+
+    /** This text style is only used for audit pages of the design system. */
+    static const specsxs = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 400,
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specss = {
+      'fontFamily': 'Gotham',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsms = {
+      'fontFamily': 'Gotham',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsm = {
+      'fontFamily': 'Gotham',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsml = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 400,
+      'fontSize': '64px',
+      'lineHeight': '80px',
+      'textDecoration': 'underline',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsl = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 400,
+      'textDecoration': 'underline',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsxl = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 600,
+      'textDecoration': 'underline',
+    };
+    /** This text style is only used for audit pages of the design system. */
+    static const specsxxl = {
+      'fontFamily': 'Gotham',
+      'fontWeight': 600,
+      'textDecoration': 'underline',
+    };
+
+}