@marioschmidt/design-system-tokens 1.0.65 → 1.0.66

package/dist/scss/brands/advertorial/semantic/breakpoints/breakpoint-xs-320px.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: 14px;
+$title-2-font-size: 14px;
 
 // 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: 39px;
+$display-1-font-size: 39px;
 // This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
-$display2-font-size: 35px;
+$display-2-font-size: 35px;
 // This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
-$display3-font-size: 27px;
+$display-3-font-size: 27px;
 
 // Semantic - Typography - FontSize - Headline
 // This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
-$headline1-font-size: 36px;
+$headline-1-font-size: 36px;
 // This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
-$headline2-font-size: 30px;
+$headline-2-font-size: 30px;
 // This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
-$headline3-font-size: 24px;
+$headline-3-font-size: 24px;
 // This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
-$headline4-font-size: 16px;
+$headline-4-font-size: 16px;
 
 // 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: 17px;
 
 // 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: 16px;
+$callout-1-font-size: 16px;
 
 // Semantic - Typography - FontSize - Footnote
 // This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
-$footnote1-font-size: 13px;
+$footnote-1-font-size: 13px;
 // This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
-$footnote2-font-size: 10px;
+$footnote-2-font-size: 10px;
 
 // 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: 16px;
+$kicker-1-font-size: 16px;
 // 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: 16px;
+$kicker-2-font-size: 16px;
 // 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: 14px;
+$kicker-3-font-size: 14px;
 // 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: 12px;
+$kicker-4-font-size: 12px;
 
 // Semantic - Typography - FontSize - Subheadline
 // This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
-$subheadline1-font-size: 18px;
+$subheadline-1-font-size: 18px;
 
 // 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: 29.75;
 
 // Semantic - Typography - LineHeight - Kicker
-$kicker4-line-height: 13.2;
-$kicker3-line-height: 15.4;
-$kicker2-line-height: 17.6;
-$kicker1-line-height: 17.6;
+$kicker-4-line-height: 13.2;
+$kicker-3-line-height: 15.4;
+$kicker-2-line-height: 17.6;
+$kicker-1-line-height: 17.6;
 
 // 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: 20.4;
-$label1-responsive-line-height: 10;
-$label2-line-height: 16;
-$label4-line-height: 10;
+$label-1-line-height: 20.4;
+$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: 26.4;
+$title-1-line-height: 26.4;
 // html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
-$title2-line-height: 16.8;
+$title-2-line-height: 16.8;
 
 // Semantic - Typography - LineHeight - Quote
 // This variable is used in the quote text style line height parameter.
 $quote-line-height: 20.8;
 
 // Semantic - Typography - LineHeight - Footnote
-$footnote1-line-height: 16.9;
-$footnote2-line-height: 13;
+$footnote-1-line-height: 16.9;
+$footnote-2-line-height: 13;
 
 // Semantic - Typography - LineHeight - Headline
-$headline1-line-height: 37.8;
-$headline2-line-height: 33;
-$headline3-line-height: 26.4;
-$headline4-line-height: 18.4;
+$headline-1-line-height: 37.8;
+$headline-2-line-height: 33;
+$headline-3-line-height: 26.4;
+$headline-4-line-height: 18.4;
 
 // Semantic - Typography - LineHeight - Callout
 $callout-line-height: 20.8;
 
 // Semantic - Typography - LineHeight - Subheadline
-$subheadline1-line-height: 23.4;
+$subheadline-1-line-height: 23.4;
 
 // 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;
 
 
 // ============================================

package/dist/scss/brands/advertorial/semantic/effects/effects-dark.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
 // 
 // Brand: Advertorial | Context: Mode: dark

package/dist/scss/brands/advertorial/semantic/effects/effects-light.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
 // 
 // Brand: Advertorial | Context: Mode: light

package/dist/scss/brands/advertorial/semantic/typography/typography-lg.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
 // 
 // Brand: Advertorial | Context: Breakpoint: lg
@@ -17,7 +17,7 @@
 // ============================================
 
 /** 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 */
-$display1: (
+$display-1: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 116px,
@@ -25,7 +25,7 @@ $display1: (
   letter-spacing: -2px,
 );
 /** 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 */
-$display2: (
+$display-2: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 62px,
@@ -33,7 +33,7 @@ $display2: (
   letter-spacing: -1px,
 );
 /** 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 */
-$display3: (
+$display-3: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 39px,
@@ -47,28 +47,28 @@ $display3: (
 // ============================================
 
 /** 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 */
-$headline1: (
+$headline-1: (
   font-family: Lucida Grande,
   font-weight: 900,
   font-size: 70px,
   line-height: 77px,
 );
 /** 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 */
-$headline2: (
+$headline-2: (
   font-family: Lucida Grande,
   font-weight: 900,
   font-size: 48px,
   line-height: 52.8px,
 );
 /** 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 */
-$headline3: (
+$headline-3: (
   font-family: Lucida Grande,
   font-weight: 900,
   font-size: 32px,
   line-height: 35.2px,
 );
 /** 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 */
-$headline4: (
+$headline-4: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 22px,
@@ -81,7 +81,7 @@ $headline4: (
 // ============================================
 
 /** 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 */
-$subheadline1: (
+$subheadline-1: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 28px,
@@ -94,28 +94,28 @@ $subheadline1: (
 // ============================================
 
 /** 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 */
-$kicker1: (
+$kicker-1: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 25px,
   line-height: 27.5px,
 );
 /** 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 */
-$kicker2: (
+$kicker-2: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 21px,
   line-height: 23.1px,
 );
 /** 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 */
-$kicker3: (
+$kicker-3: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 16px,
   line-height: 17.6px,
 );
 /** 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 */
-$kicker4: (
+$kicker-4: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 14px,
@@ -128,14 +128,14 @@ $kicker4: (
 // ============================================
 
 /** 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 */
-$title1: (
+$title-1: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 28px,
   line-height: 33.6px,
 );
 /** 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 */
-$title1-uppercase: (
+$title-1-uppercase: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 28px,
@@ -145,7 +145,7 @@ $title1-uppercase: (
 /** 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 */
-$title2: (
+$title-2: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 18px,
@@ -154,7 +154,7 @@ $title2: (
 /** 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 */
-$title2-uppercase: (
+$title-2-uppercase: (
   font-family: Lucida Grande,
   font-weight: 800,
   font-size: 18px,
@@ -264,28 +264,28 @@ $text-link-bold-hover: (
 // ============================================
 
 /** 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 */
-$footnote1: (
+$footnote-1: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 15px,
   line-height: 19.5px,
 );
 /** 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 */
-$footnote1-bold: (
+$footnote-1-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 15px,
   line-height: 19.5px,
 );
 /** 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 */
-$footnote2: (
+$footnote-2: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 13px,
   line-height: 16.9px,
 );
 /** 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 */
-$footnote2-bold: (
+$footnote-2-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 13px,
@@ -298,7 +298,7 @@ $footnote2-bold: (
 // ============================================
 
 /** 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. */
-$label1: (
+$label-1: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 17px,
@@ -306,7 +306,7 @@ $label1: (
   letter-spacing: 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. */
-$label1-bold: (
+$label-1-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 17px,
@@ -314,7 +314,7 @@ $label1-bold: (
   letter-spacing: 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 */
-$label1-bold-resp: (
+$label-1-bold-resp: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 17px,
@@ -322,7 +322,7 @@ $label1-bold-resp: (
   letter-spacing: 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. */
-$label1-uppercase-bold: (
+$label-1-uppercase-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 17px,
@@ -331,7 +331,7 @@ $label1-uppercase-bold: (
   text-transform: uppercase,
 );
 /** 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. */
-$label2: (
+$label-2: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 15px,
@@ -339,7 +339,7 @@ $label2: (
   letter-spacing: 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. */
-$label2-uppercase: (
+$label-2-uppercase: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 15px,
@@ -348,7 +348,7 @@ $label2-uppercase: (
   text-transform: uppercase,
 );
 /** 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. */
-$label2-bold: (
+$label-2-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 15px,
@@ -356,7 +356,7 @@ $label2-bold: (
   letter-spacing: 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. */
-$label2-uppercase-bold: (
+$label-2-uppercase-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 15px,
@@ -365,7 +365,7 @@ $label2-uppercase-bold: (
   text-transform: uppercase,
 );
 /** 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. */
-$label3: (
+$label-3: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 12px,
@@ -373,7 +373,7 @@ $label3: (
   letter-spacing: 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 */
-$label3-uppercase: (
+$label-3-uppercase: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 12px,
@@ -382,7 +382,7 @@ $label3-uppercase: (
   text-transform: uppercase,
 );
 /** 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. */
-$label3-bold: (
+$label-3-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 12px,
@@ -390,7 +390,7 @@ $label3-bold: (
   letter-spacing: 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. */
-$label3-uppercase-bold: (
+$label-3-uppercase-bold: (
   font-family: Lucida Grande,
   font-weight: 700,
   font-size: 12px,
@@ -399,7 +399,7 @@ $label3-uppercase-bold: (
   text-transform: uppercase,
 );
 /** 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. */
-$label4: (
+$label-4: (
   font-family: Lucida Grande,
   font-weight: 400,
   font-size: 8px,