@marioschmidt/design-system-tokens 1.0.9

package/dist/js/semantic/sportbild/breakpoints/breakpoint-sportbild-lg.js

@@ -0,0 +1,479 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const semanticBorderBorderradiusBorderradiusnone = 0; // 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements.
+export const semanticBorderBorderradiusBorderradiusxs = 2; // 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
+export const semanticBorderBorderradiusBorderradiussm = 4; // 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls.
+export const semanticBorderBorderradiusBorderradiusmd = 8; // 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
+export const semanticBorderBorderradiusBorderradiuslg = 16; // 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
+export const semanticBorderBorderradiusBorderradiusxl = 24; // 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
+export const semanticBorderBorderradiusBorderradiusfull = 9999; // creates fully rounded shapes, typically used for circular elements like avatars.
+export const semanticBorderBorderwidthBorderwidthhairline = 0.33; // 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload.
+export const semanticBorderBorderwidthBorderwidththin = 1; // 1-1-1-1 – use for subtle outlines and dividers
+export const semanticBorderBorderwidthBorderwidththick = 2; // 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
+// Common viewport width size based on the selected breakpoint.
+// Apply this token to the main frame of page layouts.
+export const semanticLayoutCanvaswidthsizeweb = 1024;
+// Common viewport height size based on the selected mode.
+// Apply this token to the main frame of page layouts to simulate realistic vertical space.
+export const semanticLayoutCanvasheightsizeweb = 768;
+// Common viewport width size based on the selected breakpoint.
+// Apply this token to the main frame of page layouts.
+export const semanticLayoutCanvaswidthsizeapp = 1194;
+// Common viewport height size based on the selected mode.
+// Apply this token to the main frame of page layouts to simulate realistic vertical space.
+export const semanticLayoutCanvasheightsizeapp = 834;
+// 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+// Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports.
+export const semanticLayoutBreakpointsBreakpointminwidthsize = 1024;
+// 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints.
+// Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports.
+export const semanticLayoutBreakpointsBreakpointmaxwidthsize = 1024;
+export const semanticLayoutContentwidthContentmaxwidthmedium = 700; // Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page.
+export const semanticLayoutContentwidthContentmaxwidthfull = 1024; // Use for content containers that should fill the full width of the page
+export const semanticLayoutGridResponsiveGridspacerespsm = 8; // 6-6-6-8 – use for side paddings and gutters in responsive layouts
+export const semanticLayoutGridResponsiveGridspacerespbase = 16; // 12-12-12-16 – use for side paddings and gutters in responsive layouts
+export const semanticLayoutGridResponsiveGridspaceresplg = 32; // 24-24-32-32 – use for side paddings and gutters in responsive layouts
+export const semanticLayoutGridResponsiveGridspacerespxl = 64; // 48-48-64-64 – use for side paddings and gutters in responsive layouts
+export const semanticLayoutGridResponsivePageinlinespace = 16; // 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints.
+export const semanticLayoutGridConstantGridspaceconstsm = 12; // 12-12-12-12 – use for fixed side paddings and gutters
+export const semanticLayoutGridConstantGridspaceconstlg = 16; // 16-16-16-16 – use for fixed side paddings and gutters
+export const semanticLayoutGridLayoutguideLayoutguidegridcolums = 12; // Used to set the column count in Figma Layout guide Grids
+export const semanticLayoutSectionSectionspacesm = 36; // 24-24-36-36 – Use for vertical spacing between subsections in a layout
+export const semanticLayoutSectionSectionspacebase = 48; // 36-36-48-48 – Use for vertical spacing between sections in a layout.
+export const semanticLayoutSectionSectionspacelg = 96; // 72-72-96-96 – Use for vertical spacing between sections in a layout
+export const semanticLayoutSectionParagraphendspace = 32; // 16-16-32-32 – Use for spacing after paragraphs in text content
+export const semanticSpaceGapResponsiveGapspaceresp2xs = 6; // 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspacerespxs = 8; // 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspacerespsm = 16; // 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspacerespmd = 24; // 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspaceresplg = 32; // 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspacerespxl = 48; // 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspaceresp2xl = 64; // 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapResponsiveGapspaceresp3xl = 96; // 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
+export const semanticSpaceGapConstantGapspaceconst2xs = 2; // 2-2-2-2 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconstxs = 4; // 4-4-4-4 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconstsm = 8; // 8-8-8-8 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconstmd = 12; // 12-12-12-12 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconstlg = 16; // 16-16-16-16 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconstxl = 24; // 24-24-24-24 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconst2xl = 32; // 32-32-32-32 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceGapConstantGapspaceconst3xl = 48; // 48-48-48-48 – Use for fixed gaps between items inside of UI elements
+export const semanticSpaceInlineResponsiveInlinespacerespsm = 16; // 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+export const semanticSpaceInlineResponsiveInlinespacerespmd = 24; // 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints
+export const semanticSpaceInlineResponsiveInlinespaceresplg = 32; // 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+export const semanticSpaceInlineResponsiveInlinespacerespxl = 40; // 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+export const semanticSpaceInlineResponsiveInlinespaceresp2xl = 64; // 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+export const semanticSpaceInlineConstantInlinespaceconst3xs = 2; // 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconst2xs = 4; // 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconstxs = 6; // 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconstsm = 8; // 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconstmd = 12; // 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconstlg = 16; // 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconstxl = 24; // 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceInlineConstantInlinespaceconst2xl = 32; // 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
+export const semanticSpaceStackResponsiveStackspacerespsm = 16; // 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+export const semanticSpaceStackResponsiveStackspacerespmd = 24; // 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+export const semanticSpaceStackResponsiveStackspaceresplg = 32; // 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+export const semanticSpaceStackResponsiveStackspacerespxl = 40; // 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+export const semanticSpaceStackResponsiveStackspaceresp2xl = 64; // 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+export const semanticSpaceStackConstantStackspaceconst3xs = 2; // 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconst2xs = 4; // 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconstxs = 6; // 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconstsm = 8; // 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconstmd = 12; // 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconstlg = 16; // 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconstxl = 24; // 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSpaceStackConstantStackspaceconst2xl = 32; // 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
+export const semanticSizeResponsiveSizeresp4xs = 16; // 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresp3xs = 24; // 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresp2xs = 32; // 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizerespxs = 48; // 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizerespsm = 56; // 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizerespmd = 72; // 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresplg = 92; // 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizerespxl = 96; // 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresp2xl = 100; // 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresp3xl = 148; // 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeResponsiveSizeresp4xl = 180; // 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
+export const semanticSizeConstantSizeconst4xs = 8; // 8-8-8-8 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconst3xs = 16; // 16-16-16-16 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconst2xs = 24; // 24-24-24-24 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconstxs = 32; // 32-32-32-32 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconstsm = 40; // 40-40-40-40 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconstmd = 48; // 48-48-48-48 Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconstlg = 56; // 56-56-56-56 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconstxl = 64; // 64-64-64-64 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconst2xl = 72; // 72-72-72-72 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconst3xl = 96; // 96-96-96-96 – Use for setting fixed height and width of UI elements
+export const semanticSizeConstantSizeconst4xl = 148; // 148-148-148-148 – Use for setting fixed height and width of UI elements
+export const semanticTypographyFontfamilyBodyfontfamily = "Inter"; // This variable references the bodyFontFamily variable from the branding collection.
+export const semanticTypographyFontfamilyCalloutfontfamily = "AntennaCond";
+export const semanticTypographyFontfamilyDisplayfontfamily = "AntennaCond";
+export const semanticTypographyFontfamilyFootnotefontfamily = "Inter";
+export const semanticTypographyFontfamilyHeadlinefontfamily =
+  "AntennaExtraCond";
+export const semanticTypographyFontfamilyKickerfontfamily = "AntennaExtraCond";
+export const semanticTypographyFontfamilyLabelfontfamily = "AntennaExtraCond";
+export const semanticTypographyFontfamilySubheadlinefontfamily = "AntennaCond";
+export const semanticTypographyFontfamilyTitlefontfamily = "AntennaCond";
+export const semanticTypographyFontfamilyQuotefontfamily = "AntennaCond";
+export const semanticTypographyFontsizeBodyBodyfontsize = 17; // This variable is used on the body text style's font size parameter. It remains constant at 21.
+export const semanticTypographyFontsizeCalloutCallout1fontsize = 24; // This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
+export const semanticTypographyFontsizeDisplayDisplay1fontsize = 114; // This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
+export const semanticTypographyFontsizeDisplayDisplay2fontsize = 61; // This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
+export const semanticTypographyFontsizeDisplayDisplay3fontsize = 38; // This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
+export const semanticTypographyFontsizeFootnoteFootnote1fontsize = 15; // This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
+export const semanticTypographyFontsizeFootnoteFootnote2fontsize = 13; // This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
+export const semanticTypographyFontsizeHeadlineHeadline1fontsize = 80; // This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
+export const semanticTypographyFontsizeHeadlineHeadline2fontsize = 50; // This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
+export const semanticTypographyFontsizeHeadlineHeadline3fontsize = 34; // This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
+export const semanticTypographyFontsizeHeadlineHeadline4fontsize = 26; // This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
+export const semanticTypographyFontsizeKickerKicker1fontsize = 32; // Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size.
+export const semanticTypographyFontsizeKickerKicker2fontsize = 26; // Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24
+export const semanticTypographyFontsizeKickerKicker3fontsize = 22; // Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
+export const semanticTypographyFontsizeKickerKicker4fontsize = 18; // Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
+export const semanticTypographyFontsizeLabelLabel1fontsize = 17; // This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
+export const semanticTypographyFontsizeLabelLabel1fontsizeresponsive = 17; // 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
+export const semanticTypographyFontsizeLabelLabel2fontsize = 15; // This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
+export const semanticTypographyFontsizeLabelLabel3fontsize = 12; // This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
+export const semanticTypographyFontsizeLabelLabel4fontsize = 8; // This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
+export const semanticTypographyFontsizeSubheadlineSubheadline1fontsize = 26; // This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
+export const semanticTypographyFontsizeTitleTitle1fontsize = 30; // 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+export const semanticTypographyFontsizeTitleTitle2fontsize = 20; // 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+export const semanticTypographyFontsizeQuoteQuotefontsize = 20; // 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
+export const semanticTypographyFontweightBodyBodyfontweightbook = 400;
+export const semanticTypographyFontweightBodyBodyfontweightbold = 700;
+export const semanticTypographyFontweightCalloutCalloutfontweight = 800;
+export const semanticTypographyFontweightDisplayDisplayfontweight = 800;
+export const semanticTypographyFontweightFootnoteFootnotefontweightbold = 700;
+export const semanticTypographyFontweightFootnoteFootnotefontweightbook = 400;
+export const semanticTypographyFontweightHeadlineHeadline1fontweight = 700;
+export const semanticTypographyFontweightHeadlineHeadline1fontweightst =
+  "Bold Italic"; // This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+export const semanticTypographyFontweightHeadlineHeadline2fontweight = 700;
+export const semanticTypographyFontweightHeadlineHeadline3fontweight = 700;
+export const semanticTypographyFontweightHeadlineHeadline4fontweight = 700;
+export const semanticTypographyFontweightKickerKickerfontweight = 700;
+export const semanticTypographyFontweightKickerKickerfontweightst =
+  "Black Italic";
+export const semanticTypographyFontweightLabelLabelfontweightbook = 400;
+export const semanticTypographyFontweightLabelLabelfontweightbold = 700;
+export const semanticTypographyFontweightSubheadlineSubheadlinefontweight = 700;
+export const semanticTypographyFontweightTitleTitlefontweight = 800;
+export const semanticTypographyFontweightQuoteQuotefontweight = 800;
+export const semanticTypographyLineheightBodyBodylineheight = 28.05; // Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height)
+export const semanticTypographyLineheightCalloutCalloutlineheight = 31.2;
+export const semanticTypographyLineheightDisplayDisplay1lineheight = 120;
+export const semanticTypographyLineheightDisplayDisplay2lineheight = 64;
+export const semanticTypographyLineheightDisplayDisplay3lineheight = 40;
+export const semanticTypographyLineheightFootnoteFootnote1lineheight = 19;
+export const semanticTypographyLineheightFootnoteFootnote2lineheight = 17.03;
+export const semanticTypographyLineheightHeadlineHeadline1lineheight = 88;
+export const semanticTypographyLineheightHeadlineHeadline2lineheight = 57.6;
+export const semanticTypographyLineheightHeadlineHeadline3lineheight = 39.1;
+export const semanticTypographyLineheightHeadlineHeadline4lineheight = 29.9;
+export const semanticTypographyLineheightKickerKicker1lineheight = 35.2;
+export const semanticTypographyLineheightKickerKicker2lineheight = 28.6;
+export const semanticTypographyLineheightKickerKicker3lineheight = 24.2;
+export const semanticTypographyLineheightKickerKicker4lineheight = 19.8;
+export const semanticTypographyLineheightLabelLabel1lineheight = 20.4; // This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
+export const semanticTypographyLineheightLabelLabel1responsivelineheight = 20.4;
+export const semanticTypographyLineheightLabelLabel2lineheight = 19.2;
+export const semanticTypographyLineheightLabelLabel3lineheight = 14.4;
+export const semanticTypographyLineheightLabelLabel4lineheight = 10;
+export const semanticTypographyLineheightSubheadlineSubheadline1lineheight = 33.8;
+export const semanticTypographyLineheightTitleTitle1lineheight = 33;
+export const semanticTypographyLineheightTitleTitle2lineheight = 26; // html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+export const semanticTypographyLineheightQuoteQuotelineheight = 26; // This variable is used in the quote text style line height parameter.
+export const semanticTypographyLetterspacingLetterspacingpositivelg = 3; // 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingpositivemd = 1; // 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingpositivesm = 0.5; // 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingpositivexs = 0.25; // 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingnone = 0; // 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingnegativexs = -0.25; // -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component.
+export const semanticTypographyLetterspacingLetterspacingnegativesm = -0.25; // -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingnegativemd = -1; // -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingLetterspacingnegativelg = -3; // -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
+export const semanticTypographyLetterspacingDisplayDisplay1letterspacing = -2; // -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact.
+export const semanticTypographyLetterspacingDisplayDisplay2letterspacing = -1; // -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices.
+export const semanticTypographyLetterspacingDisplayDisplay3letterspacing = -1; // -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices.
+export const semanticVisibilityBooleanVisilbledesktoponly = true; // Use for showing elements on desktop viewport sizes only
+export const semanticVisibilityBooleanVisilbletabletonly = false; // Use for showing elements on tablet viewport sizes only
+export const semanticVisibilityBooleanVisilblemobileonly = false; // Use for showing elements on mobile viewport sizes only
+export const semanticVisibilityBooleanVisilbleabove600px = true; // Use for showing elements on viewport sizes above 600 px
+export const semanticVisibilityBooleanVisilblebelow600px = false; // Use for showing elements on viewport sizes below 600 px
+export const semanticVisibilityBooleanHideondesktop = false; // Use for hiding elements on desktop viewport sizes only
+export const semanticVisibilityBooleanHideonmobile = true; // Use for hiding elements on mobile viewport sizes
+export const semanticVisibilityVariantswitchBpspecificweb = "lg";
+export const semanticVisibilityVariantswitchBpspecificapp = "regular";
+export const semanticVisibilityVariantswitchChangeonlg = "lg";
+export const semanticVisibilityVariantswitchChangeonmd = "md/lg"; // This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints.
+export const componentAccordionAccordionlabelfontfamily = "Inter"; // This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande
+export const componentAvatarAvatararticlesize = 48; // This variable is used for setting the size of avatar images in article pages. It references the sizeConstMD variable from the "generic" semantic collection. Its value is 48 across devices.
+export const componentAvatarAvatarauthorpagesize = 130; // 96 - 96 - 130 - 130 This variable is used for controlling the size of the avatar image on author pages.
+export const componentAvatarAvatarlabelfontsize = 15; // This variable is used on avatar names in article pages. Bild: 16 - 16 - 16 - 18; SpoBi&Ads: 13 - 13 - 13 - 15
+export const componentAvatarAvatarlabellineheight = 23; // This variable is used for controlling the line height of avatar texts. Its values influence the stacking space between avatar texts. 21 - 21 - 21 - 23
+export const componentAvatarAvatarfontfamily = "Inter"; // This variable is used in avatar text styles. It receives values from the Brand Tokens Collection. Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
+export const componentAvatarAvatarlanegapspace = 24; // This variable is used for setting the inline space between multiple avatars that are horizontally placed in a lane when an article has multiple authors. 16 - 16 - 24 - 24
+export const componentAvatarAppavatarfontfamily = "AntennaCond"; // This variable is used for setting the font of avatars on iOS and Android platforms. This is subject to review.
+export const componentArticleArticlekickerfontsize = 32; // This variable is used to control the font size of kickers in the heading section of article pages. 18 - 18 - 22 - 30
+export const componentArticleArticleheadlinefontsize = 80; // 40 - 40 - 72 - 100 - This variable uses the semantic variables headline2 for XS&SM, headline1 for MD&LG
+export const componentArticleArticleimagecaptionfontsize = 15; // CSS --article-figure-meta-font-size 16-16-18-18
+export const componentArticleArticleimagecaptionlineheight = 19.5; // this component level variable references the branding variables
+export const componentArticleArticlemetafontsize = 16; // This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. 12 - 12 - 14 - 16
+export const componentArticleArticlemetafontfamily = "AntennaCond"; // This variable is used on the font size of article day&time stamp that usually shows up along with the article author avatars. On app versions this variable is used for the avatar names. This variable references variables from the branding collection.
+export const componentArticleArticletopmarginspace = 16; // 8 | 8 | 12 | 16 - This space variable is used at the top edge of the article main content bounding box.
+export const componentArticleAriclemobile1colgridimagemarginspace = 72;
+export const componentArticleArticleheadingsstackspace = 16; // 12 | 12 | 12 | 16 - This spacing variable is used for the space between article page heading kickers, headlines and subheadlines. XS&SM need review; correct value might be 8
+export const componentArticleArticleheadingsinlinespace = 16; // 16 | 16 | 72 | 16 - This variable is used for the left and right space within the article page headings container which holds the article page kicker, headline and subheadline.
+export const componentArticleArticlecontentstackspace = 32; // 16 - 16 - 24 - 32 - This variable creates the vertical spacing between different article body elements such as avatars, media players, corssheadings, paragraphs, field sets, images, tables, quotes, videos, social embeds, etc.
+export const componentArticleArticlecontentinlinespace = 162; // 16 | 16 | 72 | 162 - This variable is used for making the left and right spacings around article content blocks. Current css has the article-body class assigned to a div and article body contains these horizontal padding values.
+export const componentArticleArticlegalleryateaserwidth = 300; // same as standard teaser width size variable
+export const componentArticleArticleimagesourcefontsize = 15; // NMT CSS --article-figure-meta-font-size
+export const componentArticleArticleimagesourcelineheight = 19;
+export const componentArticleArticleimagecontainerstackspace = 16;
+export const componentArticleArticleimagelandscapeinlinespace = 16;
+export const componentArticleArticleimageportaitinlinespace = 162;
+export const componentArticleArticleinfoboxinlinespace = 32;
+export const componentArticleArticleinfoboxstackspace = 32;
+export const componentAudioplayerAudioplayerfontsize = 18; // This variable is used in the text style dedicated to audio player labels for elapsed time, reproduction speed and short functionality description text. 16 - 16 - 16 - 18
+export const componentBadgeAdlabelbadgeheightsize = 30; // 30 - 30 - 30 - 30 - This variable is used on the Advert rectangular badge that is found above an ad containers.
+export const componentBadgeBadgesinnerstackspace = 2; // This space variable is used for creating the top and bottom space between a badge's text label and the surface that the text label is on top of.
+export const componentBadgeBadgesinnerinlinespace = 4; // This space variable is used for creating the left and right space between a badge's text label and the badge background surface that the text label is on top of.
+export const componentBreadcrumbBreadcrumbfontfamily = "Inter";
+export const componentBreadcrumbBreadcrumbfontsize = 11; // 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
+export const componentBreadcrumbBreadcrumblineheight = 11; // 15 - 15 - 15 - 12 -- Breadcrumbs have a slightly larger font size on mobile devices compared to when they are rendered on larger desktop devices.
+export const componentBreadcrumbBreadcrumbArrowleftinlinespace1 = 3;
+export const componentBreadcrumbBreadcrumbArrowrightinlinespace2 = 5;
+export const componentBreadcrumbBreadcrumbinlinespace = 0;
+export const componentBreadcrumbBreadcrumbfontweight = 400;
+export const componentBreadcrumbBreadcrumbstackspace = 16;
+export const componentBreakingnewsBreakingnewscontainerheightsize = 56;
+export const componentBreakingnewsBreakingnewsbadgeinlinespace = 26;
+export const componentBreakingnewsBreakingnewsbadgetitelsstackspace = 4;
+export const componentBreakingnewsBreakingnewsbadgeuppertitlefontsize = 17;
+export const componentBreakingnewsBreakingnewsbadgeuppertitlelineheight = 12;
+export const componentBreakingnewsBreakingnewsbadgelowertitlefontsize = 30;
+export const componentBreakingnewsBreakingnewsbadgelowertitlelineheight = 21;
+export const componentBreakingnewsBreakingnewsscrollingtextfontsize = 21;
+export const componentBreakingnewsBreakingnewsscrollingtextlineheight = 24;
+export const componentButtonButtonlabelfontsize = 15;
+export const componentButtonButtonlabellineheight = 15;
+export const componentButtonButtoncontentgapspace = 6;
+export const componentButtonButtoninlinespace = 16;
+export const componentButtonButtonstackspace = 6;
+export const componentButtonButtonborderwidthsize = 2;
+export const componentButtonButtoncontentminheightsize = 24; // This fixed height variable ensures that the button maintains a consistent height, even when the icon is not active.
+export const componentButtonPartnerlinkbuttonlabelfontsize = 18; // Use this variable for controlling the font size of partner buttons. 16 - 16 - 16 - 18
+export const componentButtonPartnerlinkbuttoninlinespace = 8;
+export const componentButtonPartnerlinkbuttonlabelheightsize = 48;
+export const componentButtonButtonborderradius = 8;
+export const componentCardsSearchresultcardimagewidthsize = 260;
+export const componentCardsSearchresultcardimageheightsizestacked = 189;
+export const componentCardsNewstickerimagecardwidthsize = 206;
+export const componentCarouselGalleryteasertitlebottomspace = 36; // This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+export const componentCarouselGalleryteaserappgapspace = 8; // This token is used to create more bottom padding space on system teaser headlines inside the gallery to avoid overlapping with the pagination.
+export const componentCarouselAppepapercarouselitemdefaultwidth = 172;
+export const componentCarouselAppepapercarouselitemfocuswidth = 240;
+export const componentCarouselAppepapercarousebeilageitemwidth = 172;
+export const componentCarouselStandardteasergalleryteaserwidthweb = 300;
+export const componentCarouselStandardteasergalleryteaserwidthapp = 464;
+export const componentChipsChipsfontsize = 18; // This variable is used on the chips font size parameter of the chips text style. The font size changes only for the change between larger device widths and any device smaller than the largest. 16 - 16 -16 - 18
+export const componentChipsChipsinlinespace = 12;
+export const componentChipsChipsstackspace = 8;
+export const componentDatepickerDatepickeritemdaywidthsize = 44;
+export const componentDatepickerDatepickeritemyearwidthsize = 77;
+export const componentDatepickerDatepickeritemheightsize = 44;
+export const componentDrawersMobilemenudrawerstackspace = 20;
+export const componentDrawersMobilemenudrawerleftinlinespace = 20;
+export const componentDrawersMobilemenudrawerrightinlinespace = 16;
+export const componentDrawersMobilemenudrawermaxwidthsize = 400;
+export const componentDropdownDropdownitemstackspace = 8;
+export const componentDropdownDropdowniteminlinespace = 16;
+export const componentDropdownDropdownborderradius = 4;
+export const componentFooterFooterfontfamily = "Inter";
+export const componentFooterFooterfontsize = 11; // This variable is used on footer links that commonly show up at the bottom of pages. The font size parameter remains constant at 11 px across device sizes.
+export const componentFooterFooterlineheight = 14;
+export const componentFooterFooterfontsizeuserofferpages = 18;
+export const componentFooterFooterlineheightuserofferpages = 26;
+export const componentIconIconsize = 24;
+export const componentIconIconsizeembeddmedia = 40;
+export const componentInfoelementInfoelementteaserbadgemarginspace = 8;
+export const componentInfoelementInfoelementteaserimageheightsize = 133;
+export const componentInfoelementInfoelementteaserimagewidthsize = 236;
+export const componentInfoelementInfoelementteaserbadgeheightsize = 24;
+export const componentInputfieldInputfieldfontsize = 16; // This variable controls texts inside of input fields such as dropdowns, date input and other text inputs that appear in forms for example. compact 15 - default 17 - spacious 19
+export const componentInputfieldInputfieldfontfamily = "Inter";
+export const componentInputfieldInputfieldinlinespace = 16;
+export const componentInputfieldInputfieldstackspace = 6;
+export const componentInputfieldInputfieldmessagegapspace = 4;
+export const componentInputfieldInputfieldimessageinlinespace = 16;
+export const componentInputfieldInputfieldminilabelinlinespace = 4;
+export const componentInputfieldInputfieldheightsize = 36;
+export const componentInputfieldHeyinputcontainerinlinespace = 16;
+export const componentLivetickerLivetickerappcardheightsize = 128;
+export const componentLivetickerLivetickerappcardwidthsize = 300;
+export const componentLivetickerTimestampfontfamily = "Gotham XNarrow";
+export const componentLivetickerLivetickerheadlinefontweight = 600;
+export const componentLivetickerLivetickerheadlinesfontsize = 32; // This variable is used for the font size of live ticker headlines. 22 - 22 - 32 - 32
+export const componentLivetickerLivetickertimestampfontsize = 16; // This variable is used for the live ticker time stamp font size. 14 - 14 - 16 - 16
+export const componentLivetickerLivetickertimeHeadlinestackspace = 4;
+export const componentLivetickerLivetickerslideritemwidthmaxsize = 537;
+export const componentMediaplayerAudioplayerheaderstackspace = 56;
+export const componentMediaplayerPodcastplaybuttonsize = 48;
+export const componentMediaplayerVidplayerbottombargapspace = 16;
+export const componentMediaplayerVideotimebadgefontfamily = "Inter";
+export const componentMediaplayerVidplayercontrolbuttonsize = 42;
+export const componentMediaplayerVidplayercontrolbuttoniconsizehover = 28;
+export const componentMediaplayerVidplayertimecodefontsize = 18;
+export const componentMediaplayerVidplayertimecodecontainerminwidthsize = 58;
+export const componentMediaplayerVidplayerprogressbarcontainerheightsize = 42;
+export const componentMediaplayerVidplayerunmutebuttonwidthsize = 220;
+export const componentMenuMenulinklaneheightsize = 48;
+export const componentMenuMenulogodefaultsize = 148;
+export const componentMenuMenulogoscrolledsize = 56;
+export const componentMenuMenuutillinkitemheightsize = 48;
+export const componentMenuMenuitemutilfontsize = 12;
+export const componentMenuMenuitemfontsize = 18; // This variable is used on the menu link lane and on the mobile side menu drawer.
+export const componentMenuMenuspecialnaviitemheightsize = 56;
+export const componentMenuMenuitemspace = 8;
+export const componentMenuMenulinkiteminlinespace = 4;
+export const componentMenuMenuitemutilstackspace = 10;
+export const componentMenuSubnavbarheightsize = 42;
+export const componentMenuMenuutilitylinkscontainerheightsize = 100;
+export const componentMenuMenutopstackspace = 12;
+export const componentMenuMenubottomstackspace = 0;
+export const componentMenuMenuleftinlinespace = 16;
+export const componentMenuMenurightinlinespace = 16;
+export const componentMenuMenuutilitylinksgapspace = 32;
+export const componentMenuMenuutilitylinksdividerheightsize = 48;
+export const componentMenuMenushadowvisibility = "rgba(0, 0, 0, 0)"; // This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 10 - 10 - 10 - 0
+export const componentMenuHeyinputshadowvisibility = "rgba(0, 0, 0, 0.1)"; // This color type variables are only in this semantic collection for making subtle shadow effects change visibility across device sizes. Shadow alpha: 0 - 0 - 0 - 10
+export const componentMenuIosapptopbarheightsize = 48;
+export const componentMenuIosapptopbarleftinlinespace = 19;
+export const componentMenuIosapptopbarrightinlinespace = 19;
+export const componentMenuApptopbartitlefontsize = 13;
+export const componentMenuApptopbarstagetitleheight = 17;
+export const componentNewstickerNewstickerappcardheightsize = 150;
+export const componentNewstickerNewstickerappcardwidthsize = 300;
+export const componentNewstickerNewstickertimefontfamily = "AntennaExtraCond";
+export const componentNewstickerNewstickertimefontweight = 700;
+export const componentNewstickerNewstickertimefontsize = 18; // similar to kicker3 values - 16 - 16 - 16 - 18
+export const componentNewstickerNewstickertimelineheight = 23.4; // Figma currently does not allow for percentages in Line Height variables. The values in this token are the result of multiplying the font size by the line height variable defined on the Bild home css -> newsTickerTime line height: 1.3. Line height for this component does not change across devices.
+export const componentNewstickerNewstickerbadgesinlinespace = 16;
+export const componentNewstickerNewstickerentriesstackspace = 22;
+export const componentNewstickerNewstickerentriesleftinlinespace = 22;
+export const componentNewstickerNewstickercontentstackspace = 4;
+export const componentNewstickerNewstickerkickerinnerinlinespace = 4;
+export const componentNewstickerNewstickerkickerinnerstackspace = 2;
+export const componentNewstickerNewstickertimeKickerstackspace = 6;
+export const componentNewstickerNewstickertitlesinlinespace = 30;
+export const componentNewstickerNewstickerskeletonbottomspace = 0;
+export const componentNewstickerNewstickerreddotsize = 16;
+export const componentNewstickerNewstickerlineinlinespace = 8;
+export const componentPaginationGallerypaginationitemheightsize = 4;
+export const componentPaginationGallerypaginationcontainerwebinlinespace = 12; // 8 - 8 - 12 - 12 - this component level variable references the inlineSpaceConst semantic variables; SM for smaller devices, MD for larger devices
+export const componentPaginationGallerypaginationcontainerappinlinespace = 12;
+export const componentPaginationGallerypaginationcontainerstackspace = 16; // 12 - 12 - 16 - 16 - this component level variable references the semantic
+export const componentPaginationScrollbarthicknesssize = 8;
+export const componentPaywallPaywallcardmaxwidthsize = 346;
+export const componentPaywallPaywallcardpricetagfontsize = 64; // This variable is used on the paywall card price tag. 64 constant
+export const componentPaywallPaywallcardpricetaglineheight = 64;
+export const componentPaywallPaywallcardpricenotefontsize = 40; // This variable is used on the paywall card text under the price tag. 40 - 40 - 40 - 40
+export const componentPaywallPaywallcardpricenotelineheight = 40;
+export const componentPaywallPaywallcontainergapspace = -48;
+export const componentPaywallPaywallheaderbottomstackspace = 80;
+export const componentQuotesQuotecontainerinlinespace = 28;
+export const componentQuotesQuotecontentgapspace = 48;
+export const componentQuotesQuotecontainerstackspace = 32;
+export const componentQuotesQuotequotationmarksfontsize = 36;
+export const componentRadiobuttonsRadioselectorsize = 20;
+export const componentRadiobuttonsRadioselectordotactivesize = 12;
+export const componentSearchSearchresultbadgeheightsize = 18;
+export const componentSectiontitleSectiontitleinnerstackbottomspace = 12;
+export const componentSectiontitleSectiontitleArrowinlinespace = 5; // This variable is used on large title headings that are h2 elements in html and indicate a new section in the user interface. This space changes when a user hovers over the large title.
+export const componentSectiontitleSectiontitleArrowinlinespaceactive = 8; // This variable is used for increasing the space between the text and the arrow at the end of the large title text. On mobile devices there is no hover state so this variables values are the same as the default state values.
+export const componentSectiontitleSectiontitleheightsize = 40;
+export const componentSeparatorsSeparatorthicknesssize = 2;
+export const componentSkeletonsHeadlinesskeletonimageplaceholdermaxwidth = 160;
+export const componentSkeletonsArticleskeletonimageinlinespace = 48;
+export const componentSkeletonsArticleskeletontextinlinespace = 48;
+export const componentSkeletonsArticletextskeletonheightsize = 720;
+export const componentSpecialnaviSpecialnaviinlinespace = 32;
+export const componentSlidersSliderprogressbaridleheightsize = 4;
+export const componentSlidersSliderprogressbarhoverheightsize = 8;
+export const componentSlidersSliderprogressinactiveheightsize = 2;
+export const componentSlidersVidplayerprogressbarheightsize = 12;
+export const componentSpinnersVideospinnersize = 80;
+export const componentSpinnersVideospinnersize05x = 40;
+export const componentSpinnersVideospinnerstrokesize = 4;
+export const componentTabsTablabelfontsize = 16; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+export const componentTabsTablabelfontsizeline = 16; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+export const componentTabsIostabbarheightsize = 49;
+export const componentTabsAndroidtabbarheightsize = 74;
+export const componentTabsAppstabslabelfontsize = 16; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+export const componentTabsAppstabslabellineheight = 23.4; // Tab labels font size remain constant at 16px across devices and breakpoints. This behavior can be seen on the Mein Konto page tabs for purchases and payment data.
+export const componentTabsTopbartabitemheightsize = 44;
+export const componentTableTablecolumnwidthsize05x = 72;
+export const componentTableTablecolumnwidthsize075x = 100;
+export const componentTableTablecolumnwidthsize1x = 140;
+export const componentTableTablecolumnwidthsize15x = 180;
+export const componentTableTablecolumnwidthsize2x = 220;
+export const componentTableTablecolumnwidthsize25x = 240;
+export const componentTableTablecolumnwidthsize3x = 280;
+export const componentTableTableitemmaxwidthsize = 224;
+export const componentTeaserAteaserAteaserkickerfontsize = 26; // 16 - 16 - 22 - 24 This variable references the semantic variables kicker3fontsize and kicker2fontsize. At the 600px breakpoint smaller devices use the kicker3 variable
+export const componentTeaserAteaserAteaserkickerlineheight = 26;
+export const componentTeaserAteaserAteaserheadlinefontsize = 50; // This variable references the semantic variables headline3 (XS&SM) and headline2 (MD&LG). 28 - 28 - 48 - 64
+export const componentTeaserAteaserAteaserheadlinelineheight = 57.6;
+export const componentTeaserAteaserAteasertitleinlinespace = 16;
+export const componentTeaserBteaserBteasertitleinlinespace = 16;
+export const componentTeaserBildplayBildplayteaserwidthsize = 193;
+export const componentTeaserMqteaserMqteaserheadlinefontsize = 34; // XS-headline4FontSize:22 // SM-headline4FontSize:22 // MD-headline3FontSize:36 // LG-headline3FontSize:40
+export const componentTeaserMqteaserMqteaserheadlinelineheight = 39.1;
+export const componentTeaserMqteaserMqteaserheadlinefontweight = 700;
+export const componentTeaserMqteaserMqteasertitleinlinespace = 12;
+export const componentTeaserTeaserbadgesheightsizelg = 40; // This token is for controling the height of badges that are inside of teasers. 32 - 32 - 32 - 40
+export const componentTeaserTeaserbadgesheightsizesm = 32;
+export const componentTeaserTeaserbadgesmarginspace = 8; // This variable is used for creating space around the outside of a subscription badge or video icon badge.
+export const componentTeaserTeaserkickerbginlinespace = 6;
+export const componentTeaserTeaserkickerbgstackspace = 2;
+export const componentTeaserQteaserQuadkickerfontsize = 26;
+export const componentTeaserQteaserQuadheadlinefontsize = 80; // This component level variable is used on the quad teaser headline. It references the semantic level variable headline1. 48 - 48 - 72 - 100
+export const componentTeaserQteaserQuadheadlinelineheight = 88;
+export const componentTeaserQteaserQteasertitleinlinespace = 24;
+export const componentTeaserTeaserlayoutgridspace = 16;
+export const componentTeaserStdteaserStdteaserbadgesmarginspace = 8; // This variable is used for creating space around the outside of a subscription badge or video icon badge.
+export const componentTeaserStdteaserStdteaserimagetitlegapspace = 6;
+export const componentTeaserStdteaserStdteaserkickerheadlinestackspace = 2; // 2 | 2 | 2 | 2 - This variable is used on the standard teaser vertical spacing between the kicker and the headline. It references the semantic variable stackSpaceConst3XS
+export const componentTeaserSuperaSuperateasertitleinlinespace = 24; // 16 - 16 - 16 - 16
+export const componentTeaserTeasertitleinlineleftspace = 0;
+export const componentTeaserTeasertitlestackspace = 6;
+export const componentTeaserTeasertitlegapspace = 4;
+export const componentTeaserTeasertitlebottomstackspace = 16;
+export const componentToggleswitchApptoggleitemlabelfontsize = 18; // This variable is used on labels in list items with toggle switches found in app preferences. 14 - 14 - 16 - 18
+export const componentToggleswitchApptoggleitemlabellineheight = 18.2; // This variable is used on labels in list items with toggle switches found in app preferences. 14.1 - 14.1 - 16.2 - 18.2
+export const componentVideoVideobadgetimelineheight = 23.8;
+export const componentVideoVideotimebadgefontsize = 18; // 16 - 16 - 18 - 18 -- This variable is used to control the videoTimeBadge text style's font size parameter. The typography style that uses this variable is the videoTimeBadge style. The badge that uses this variable appears on the upper right corner of horizontal videos.
+export const componentVideoVerticalvideomockheadlinefontsize = 32;
+export const componentVideoVideoframeinlinespace = 16;
+export const componentVideoVideoredplayiconheightsize = 18; // This variable is used for changing the red play icon inside the white square.
+export const componentVideoVideoredplayiconwidthsize = 14;
+export const componentVideoVideoskeletoncontainerheight = 464;
+export const componentVideoVideotimebadgesize = 40; // 24 - 24 - 32 - 40 - This variable is used on horizontal video badges that contain a red play icon on top of a white square next to a timestamp.
+export const componentVideoVideotimebadgecornersize = 2; // This variable is used on video player badges that display a red play icon on top of a white square next to a time stamp. This variable references the borderRadiusXS. Constant value of 2 across device sizes.
+export const componentVideoVideoadbadgefontsize = 16; // 14 - 14 - 16 - 16 -- This variable is used in the videoAdBadge font size parameter.
+export const componentDsysdocsSpecsfontfamily = "Gotham"; // This variable is used only for texts and labels that form part of this design system's documentation.
+export const componentDsysdocs1columnmobile = 656; // This variable is used only for this design system's component tests.
+export const componentDsysdocsDsysdocswidthsize = 1440;
+export const componentDsysdocsDscaptionstackspace05x = 8; // This variable is used in documentation pages that have small caption or lables along with a UI component documented. 4 - 4 - 6 - 8
+export const componentDsysdocsDscaptionstackspace1x = 16;
+export const componentDsysdocsDsmaincontainerspace = 68; // This variable is used on documentation pages. This is an alternative variable to the main container max width variable. 0 - 0 - 68 - 68
+export const componentDsysdocsFoundationsbannerheightsize = 140; // This variable is used on documentation pages that have an artistic banner at the top of the page that is related to the foundation topic on the page. 80 - 80 -80 - 140
+export const componentDsysdocsMaincontentstagesize = 1024; // This variable is used as a max width size for content blocks. For mobile devices this var references the DSysDocsWidthSize var 320 - 750 - 962 - 1024
+export const componentDsysdocsThinbannerverticalheightsize = 186; // This variable is currently used on a thin gallery that appears on desktop websites with petbook and other "books" content. Its height changes to a large height on mobile sites. 558 - 558 - 558 - 186
+export const componentDsysdocsBilddesignframespace = 64; // Variable used in spacing parameters of bild.design webpage mockups. move to bild.design group maybe
+export const componentDsysdocsDocheaderheightsize = 180; // This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180
+export const breakpointname = "lg";