@marioschmidt/design-system-tokens 1.0.65 → 1.0.66

package/dist/scss/brands/bild/semantic/breakpoints/breakpoint-sm-390px-compact.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.65
+// BILD Design System Tokens v1.0.66
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -70,27 +70,27 @@ $content-max-width-full: 1024px;
 
 // Semantic - Typography - FontSize - Title
 // 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
-$title1-font-size: 22px;
+$title-1-font-size: 22px;
 // 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
-$title2-font-size: 16px;
+$title-2-font-size: 16px;
 
 // Semantic - Typography - FontSize - Display
 // This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
-$display1-font-size: 40px;
+$display-1-font-size: 40px;
 // This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
-$display2-font-size: 36px;
+$display-2-font-size: 36px;
 // This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
-$display3-font-size: 28px;
+$display-3-font-size: 28px;
 
 // Semantic - Typography - FontSize - Headline
 // This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
-$headline1-font-size: 48px;
+$headline-1-font-size: 48px;
 // This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
-$headline2-font-size: 40px;
+$headline-2-font-size: 40px;
 // This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
-$headline3-font-size: 28px;
+$headline-3-font-size: 28px;
 // This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
-$headline4-font-size: 22px;
+$headline-4-font-size: 22px;
 
 // Semantic - Typography - FontSize - Body
 // This variable is used on the body text style's font size parameter. It remains constant at 21.
@@ -98,39 +98,39 @@ $body-font-size: 21px;
 
 // Semantic - Typography - FontSize - Label
 // This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
-$label3-font-size: 12px;
+$label-3-font-size: 12px;
 // This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
-$label2-font-size: 15px;
+$label-2-font-size: 15px;
 // This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
-$label1-font-size: 17px;
+$label-1-font-size: 17px;
 // 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
-$label1-font-size-responsive: 10px;
+$label-1-font-size-responsive: 10px;
 // This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
-$label4-font-size: 8px;
+$label-4-font-size: 8px;
 
 // Semantic - Typography - FontSize - Callout
 // This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
-$callout1-font-size: 18px;
+$callout-1-font-size: 18px;
 
 // Semantic - Typography - FontSize - Footnote
 // This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
-$footnote1-font-size: 16px;
+$footnote-1-font-size: 16px;
 // This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
-$footnote2-font-size: 12px;
+$footnote-2-font-size: 12px;
 
 // Semantic - Typography - FontSize - Kicker
 // 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.
-$kicker1-font-size: 18px;
+$kicker-1-font-size: 18px;
 // 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
-$kicker2-font-size: 18px;
+$kicker-2-font-size: 18px;
 // Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
-$kicker3-font-size: 16px;
+$kicker-3-font-size: 16px;
 // Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
-$kicker4-font-size: 14px;
+$kicker-4-font-size: 14px;
 
 // Semantic - Typography - FontSize - Subheadline
 // This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
-$subheadline1-font-size: 24px;
+$subheadline-1-font-size: 24px;
 
 // Semantic - Typography - FontSize - Quote
 // 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
@@ -168,12 +168,12 @@ $kicker-font-weight-st: 700;
 $subheadline-font-weight: 700;
 
 // Semantic - Typography - FontWeight - Headline
-$headline1-font-weight: 700;
-$headline2-font-weight: 700;
-$headline3-font-weight: 700;
-$headline4-font-weight: 600;
+$headline-1-font-weight: 700;
+$headline-2-font-weight: 700;
+$headline-3-font-weight: 700;
+$headline-4-font-weight: 600;
 // This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
-$headline1-font-weight-st: 700;
+$headline-1-font-weight-st: 700;
 
 // Semantic - Typography - FontWeight - Title
 $title-font-weight: 800;
@@ -193,48 +193,48 @@ $footnote-font-weight-bold: 700;
 $body-line-height: 28;
 
 // Semantic - Typography - LineHeight - Kicker
-$kicker4-line-height: 15.4;
-$kicker3-line-height: 17.6;
-$kicker2-line-height: 19.8;
-$kicker1-line-height: 19.8;
+$kicker-4-line-height: 15.4;
+$kicker-3-line-height: 17.6;
+$kicker-2-line-height: 19.8;
+$kicker-1-line-height: 19.8;
 
 // Semantic - Typography - LineHeight - Label
-$label3-line-height: 14.4;
+$label-3-line-height: 14.4;
 // This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
-$label1-line-height: 17;
-$label1-responsive-line-height: 10;
-$label2-line-height: 16;
-$label4-line-height: 10;
+$label-1-line-height: 17;
+$label-1-responsive-line-height: 10;
+$label-2-line-height: 16;
+$label-4-line-height: 10;
 
 // Semantic - Typography - LineHeight - Display
-$display1-line-height: 40;
-$display2-line-height: 36;
-$display3-line-height: 28;
+$display-1-line-height: 40;
+$display-2-line-height: 36;
+$display-3-line-height: 28;
 
 // Semantic - Typography - LineHeight - Title
-$title1-line-height: 22;
+$title-1-line-height: 22;
 // html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
-$title2-line-height: 17.6;
+$title-2-line-height: 17.6;
 
 // Semantic - Typography - LineHeight - Quote
 // This variable is used in the quote text style line height parameter.
 $quote-line-height: 16;
 
 // Semantic - Typography - LineHeight - Footnote
-$footnote1-line-height: 21;
-$footnote2-line-height: 15.6;
+$footnote-1-line-height: 21;
+$footnote-2-line-height: 15.6;
 
 // Semantic - Typography - LineHeight - Headline
-$headline1-line-height: 48;
-$headline2-line-height: 40;
-$headline3-line-height: 28;
-$headline4-line-height: 22;
+$headline-1-line-height: 48;
+$headline-2-line-height: 40;
+$headline-3-line-height: 28;
+$headline-4-line-height: 22;
 
 // Semantic - Typography - LineHeight - Callout
 $callout-line-height: 18;
 
 // Semantic - Typography - LineHeight - Subheadline
-$subheadline1-line-height: 24;
+$subheadline-1-line-height: 24;
 
 // Semantic - Typography - LetterSpacing
 // 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.
@@ -258,11 +258,11 @@ $letter-spacing-positive-xs: 0.25;
 
 // Semantic - Typography - LetterSpacing - display
 // -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.
-$display1-letter-spacing: -0.5;
+$display-1-letter-spacing: -0.5;
 // -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.
-$display2-letter-spacing: -0.5;
+$display-2-letter-spacing: -0.5;
 // -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.
-$display3-letter-spacing: -0.5;
+$display-3-letter-spacing: -0.5;
 
 // Semantic - Border - BorderRadius
 // 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
@@ -303,7 +303,7 @@ $inline-space-resp-md: 12px;
 // 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
 $inline-space-resp-lg: 16px;
 // 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
-$inline-space-resp2-xl: 32px;
+$inline-space-resp-2-xl: 32px;
 // 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
 $inline-space-resp-xl: 24px;
 
@@ -315,15 +315,15 @@ $inline-space-const-md: 12px;
 // 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
 $inline-space-const-lg: 16px;
 // 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
-$inline-space-const2-xl: 32px;
+$inline-space-const-2-xl: 32px;
 // 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
 $inline-space-const-xl: 24px;
 // 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
 $inline-space-const-xs: 6px;
 // 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
-$inline-space-const3-xs: 2px;
+$inline-space-const-3-xs: 2px;
 // 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
-$inline-space-const2-xs: 4px;
+$inline-space-const-2-xs: 4px;
 
 // Semantic - Space - Stack - Responsive
 // 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
@@ -331,7 +331,7 @@ $stack-space-resp-md: 12px;
 // 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
 $stack-space-resp-lg: 16px;
 // 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp2-xl: 32px;
+$stack-space-resp-2-xl: 32px;
 // 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
 $stack-space-resp-sm: 8px;
 // 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
@@ -345,15 +345,15 @@ $stack-space-const-md: 12px;
 // 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
 $stack-space-const-lg: 16px;
 // 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const2-xl: 32px;
+$stack-space-const-2-xl: 32px;
 // 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
 $stack-space-const-xl: 24px;
 // 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
 $stack-space-const-xs: 6px;
 // 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const3-xs: 2px;
+$stack-space-const-3-xs: 2px;
 // 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const2-xs: 4px;
+$stack-space-const-2-xs: 4px;
 
 // Semantic - Space - Gap - Responsive
 // 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
@@ -363,19 +363,19 @@ $gap-space-resp-lg: 16px;
 // 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
 $gap-space-resp-xl: 24px;
 // 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
-$gap-space-resp2-xl: 32px;
+$gap-space-resp-2-xl: 32px;
 // 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
 $gap-space-resp-md: 12px;
 // 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
 $gap-space-resp-sm: 8px;
 // 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
-$gap-space-resp2-xs: 2px;
+$gap-space-resp-2-xs: 2px;
 // 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
-$gap-space-resp3-xl: 48px;
+$gap-space-resp-3-xl: 48px;
 
 // Semantic - Space - Gap - Constant
 // 2-2-2-2 – Use for fixed gaps between items inside of UI elements
-$gap-space-const2-xs: 2px;
+$gap-space-const-2-xs: 2px;
 // 4-4-4-4 – Use for fixed gaps between items inside of UI elements
 $gap-space-const-xs: 4px;
 // 8-8-8-8 – Use for fixed gaps between items inside of UI elements
@@ -387,15 +387,15 @@ $gap-space-const-lg: 16px;
 // 24-24-24-24 – Use for fixed gaps between items inside of UI elements
 $gap-space-const-xl: 24px;
 // 32-32-32-32 – Use for fixed gaps between items inside of UI elements
-$gap-space-const2-xl: 32px;
+$gap-space-const-2-xl: 32px;
 // 48-48-48-48 – Use for fixed gaps between items inside of UI elements
-$gap-space-const3-xl: 48px;
+$gap-space-const-3-xl: 48px;
 
 // Semantic - Size - Constant
 // 16-16-16-16 – Use for setting fixed height and width of UI elements
-$size-const3-xs: 16px;
+$size-const-3-xs: 16px;
 // 24-24-24-24 – Use for setting fixed height and width of UI elements
-$size-const2-xs: 24px;
+$size-const-2-xs: 24px;
 // 32-32-32-32 – Use for setting fixed height and width of UI elements
 $size-const-xs: 32px;
 // 40-40-40-40 – Use for setting fixed height and width of UI elements
@@ -407,19 +407,19 @@ $size-const-lg: 56px;
 // 64-64-64-64 – Use for setting fixed height and width of UI elements
 $size-const-xl: 64px;
 // 96-96-96-96 – Use for setting fixed height and width of UI elements
-$size-const3-xl: 96px;
+$size-const-3-xl: 96px;
 // 148-148-148-148 – Use for setting fixed height and width of UI elements
-$size-const4-xl: 148px;
+$size-const-4-xl: 148px;
 // 72-72-72-72 – Use for setting fixed height and width of UI elements
-$size-const2-xl: 72px;
+$size-const-2-xl: 72px;
 // 8-8-8-8 – Use for setting fixed height and width of UI elements
-$size-const4-xs: 8px;
+$size-const-4-xs: 8px;
 
 // Semantic - Size - Responsive
 // 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp3-xs: 16px;
+$size-resp-3-xs: 16px;
 // 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp2-xs: 24px;
+$size-resp-2-xs: 24px;
 // 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
 $size-resp-xs: 32px;
 // 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
@@ -431,13 +431,13 @@ $size-resp-lg: 56px;
 // 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
 $size-resp-xl: 64px;
 // 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp2-xl: 72px;
+$size-resp-2-xl: 72px;
 // 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp3-xl: 96px;
+$size-resp-3-xl: 96px;
 // 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp4-xl: 148px;
+$size-resp-4-xl: 148px;
 // 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
-$size-resp4-xs: 12px;
+$size-resp-4-xs: 12px;
 
 
 // ============================================