@marioschmidt/design-system-tokens 1.0.20 → 1.0.21

package/dist/flutter/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.dart

@@ -12,7 +12,10 @@ import 'dart:ui';
 class BreakpointXs320px {
     BreakpointXs320px._();
 
-    static const breakpointName = "xs";
+    // ============================================
+    // COMPONENT
+    // ============================================
+
     // Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     static const accordionLabelFontFamily = "Inter";
@@ -447,6 +450,18 @@ class BreakpointXs320px {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     static const docHeaderHeightSize = "144px";
 
+
+    // ============================================
+    // OTHER
+    // ============================================
+
+    static const breakpointName = "xs";
+
+
+    // ============================================
+    // SEMANTIC
+    // ============================================
+
     // Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     static const borderRadiusXs = "2px";
@@ -893,4 +908,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     static const changeOnMd = "xs/sm";
     static const bpSpecificWeb = "xs/sm";
     static const bpSpecificApp = "compact";
+
 }

package/dist/flutter/brands/sportbild/semantic/color/colormode-dark.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class ColormodeDark {
     ColormodeDark._();
 
+    // ============================================
+    // COMPONENT
+    // ============================================
+
     // Component - Alert
     /** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
     static const alertSurfaceColor = Color(0xFF343C41);
@@ -226,6 +230,11 @@ class ColormodeDark {
     static const dsDocSpacingItemBgColor = Color(0x33ffffff);
     static const dsDocSpacingItemBorderColor = Color(0xccffffff);
 
+
+    // ============================================
+    // SEMANTIC
+    // ============================================
+
     // Semantic - Attention
     /** High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition. */
     static const attentionColorHigh = Color(0xFFDD0000);
@@ -467,4 +476,5 @@ Behavior: Constant — same orange tone across Light and Dark mode. */
     /** Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
 Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds. */
     static const textColorOnDarkSurface = Color(0xFFFFFFFF);
+
 }

package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class ColormodeLight {
     ColormodeLight._();
 
+    // ============================================
+    // COMPONENT
+    // ============================================
+
     // Component - Alert
     /** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
     static const alertSurfaceColor = Color(0xFFFFFFFF);
@@ -226,6 +230,11 @@ class ColormodeLight {
     static const dsDocSpacingItemBgColor = Color(0x1add0000);
     static const dsDocSpacingItemBorderColor = Color(0x80dd0000);
 
+
+    // ============================================
+    // SEMANTIC
+    // ============================================
+
     // Semantic - Attention
     /** High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition. */
     static const attentionColorHigh = Color(0xFFDD0000);
@@ -467,4 +476,5 @@ Behavior: Constant — same orange tone across Light and Dark mode. */
     /** Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
 Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds. */
     static const textColorOnDarkSurface = Color(0xFFFFFFFF);
+
 }

package/dist/flutter/shared/colorprimitive.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class Colorprimitive {
     Colorprimitive._();
 
+    // ============================================
+    // BILD
+    // ============================================
+
     // BILD - alpha
     static const alphaBlack20 = Color(0x33000000);
     static const alphaBlack10 = Color(0x1a000000);
@@ -90,7 +94,11 @@ class Colorprimitive {
     /** Tone: 081 */
     static const bildyellow = Color(0xFFFFBF00);
 
-    // Opacity
+
+    // ============================================
+    // OPACITY
+    // ============================================
+
     static const opacity05 = "5px";
     static const opacity10 = "10px";
     static const opacity20 = "20px";
@@ -104,6 +112,11 @@ class Colorprimitive {
     static const opacity00 = "0px";
     static const opacity70 = "70px";
 
+
+    // ============================================
+    // PARTNER
+    // ============================================
+
     // Partner - Aubi
     static const aubiCore = Color(0xFFF00000);
 
@@ -131,6 +144,11 @@ class Colorprimitive {
     // Partner - Travelbook
     static const travelbookCore = Color(0xFF8EF0ED);
 
+
+    // ============================================
+    // SPORTBILD
+    // ============================================
+
     // SportBILD - alpha
     static const spobiBlue0160 = Color(0x000a2750);
     static const spobiBlue01670 = Color(0xb20a2750);
@@ -147,4 +165,5 @@ class Colorprimitive {
 
     // SportBILD - red
     static const spobiRed = Color(0xFFE52528);
+
 }

package/dist/flutter/shared/fontprimitive.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class Fontprimitive {
     Fontprimitive._();
 
+    // ============================================
+    // FONTFAMILY
+    // ============================================
+
     // FontFamily - Advertorial
     static const fontFamilyLucidaGrande = "Lucida Grande";
 
@@ -25,7 +29,11 @@ class Fontprimitive {
     static const fontFamilyAntennaCond = "AntennaCond";
     static const fontFamilyInter = "Inter";
 
-    // FontWeight
+
+    // ============================================
+    // FONTWEIGHT
+    // ============================================
+
     /** 700 is considered black weight because Gotham Condensed is the primary font family (most used in headlines). In other font families 700 is not black weight but bold. */
     static const fontWeight700BlackFontWeight = 700;
     static const fontWeight900ExtraBlackFontWeight = 900;
@@ -41,7 +49,11 @@ class Fontprimitive {
     static const boldItalicFontWeightSt = "Bold Italic";
     static const blackFontWeightSt = "Black";
 
-    // FontWeightString
+
+    // ============================================
+    // FONTWEIGHTSTRING
+    // ============================================
+
     static const fontWeightString1000UltraFontWeight = "1000";
     static const fontWeightString900ExtraBlackFontWeight = "900";
     static const fontWeightString800BlackFontWeight = "800";
@@ -55,7 +67,11 @@ class Fontprimitive {
     static const _600BoldItalicFontWeight = "Bold Italic";
     static const _700BlackItalicFontWeight = "Black Italic";
 
-    // LetterSpacing
+
+    // ============================================
+    // LETTERSPACING
+    // ============================================
+
     /** This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25. */
     static const letterSpacingLetterSpace025 = "-0.25px";
     /** This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0. */
@@ -78,4 +94,5 @@ class Fontprimitive {
     static const letterSpacingLetterSpace3 = "3px";
     /** This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes. */
     static const letterSpacingLetterSpace3 = "-3px";
+
 }

package/dist/flutter/shared/sizeprimitive.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class Sizeprimitive {
     Sizeprimitive._();
 
+    // ============================================
+    // OTHER
+    // ============================================
+
     static const size6x = "48px";
     static const size3x = "24px";
     static const size1x = "8px";
@@ -61,4 +65,5 @@ class Sizeprimitive {
     static const size100x = "800px";
     static const size0x = "0px";
     static const size0125x = "1px";
+
 }

package/dist/flutter/shared/spaceprimitive.dart

@@ -12,6 +12,10 @@ import 'dart:ui';
 class Spaceprimitive {
     Spaceprimitive._();
 
+    // ============================================
+    // OTHER
+    // ============================================
+
     static const space1x = "8px";
     static const space05x = "4px";
     static const space025x = "2px";
@@ -37,4 +41,5 @@ class Spaceprimitive {
     static const space175x = "14px";
     static const space85x = "68px";
     static const space35x = "28px";
+
 }

package/dist/ios/brands/advertorial/density/DensityCompact.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensityCompact {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "6px"
@@ -25,4 +29,5 @@ public class DensityCompact {
     public static let InputFieldHeightSize = "36px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "16px"
+
 }

package/dist/ios/brands/advertorial/density/DensityDefault.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensityDefault {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "8px"
@@ -25,4 +29,5 @@ public class DensityDefault {
     public static let InputFieldHeightSize = "40px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "17px"
+
 }

package/dist/ios/brands/advertorial/density/DensitySpacious.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensitySpacious {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "8px"
@@ -25,4 +29,5 @@ public class DensitySpacious {
     public static let InputFieldHeightSize = "48px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "19px"
+
 }

package/dist/ios/brands/advertorial/overrides/Brandtokenmapping.swift

@@ -9,8 +9,10 @@
 import UIKit
 
 public class Brandtokenmapping {
-    public static let BrandName = "Advertorial"
-    // MARK: - Component
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     public static let ButtonLabelFontWeightSt = "600"
 
     // MARK: - Component - Accordion
@@ -154,6 +156,11 @@ public class Brandtokenmapping {
     // MARK: - Component - Teaser - superA
     public static let SuperAteaserTitleInlineSpace = "16px"
 
+
+    // MARK: - ============================================
+    // MARK: - GLOBAL
+    // MARK: - ============================================
+
     // MARK: - Global - Typography - FontFamily
     /** Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the kickers text styles font family parameter. */
     public static let KickerFontFamily = "Lucida Grande"
@@ -509,4 +516,12 @@ public class Brandtokenmapping {
     public static let HideOnAdvertorial = false
     public static let OnlyBild = false
     public static let OnlySportBild = false
+
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BrandName = "Advertorial"
+
 }

package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointLg1024pxRegular.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class BreakpointLg1024pxRegular {
-    public static let BreakpointName = "lg"
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     public static let AccordionLabelFontFamily = "Lucida Grande"
@@ -444,6 +447,18 @@ public class BreakpointLg1024pxRegular {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     public static let DocHeaderHeightSize = "180px"
 
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "lg"
+
+
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
+
     // MARK: - Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     public static let BorderRadiusXs = "2px"
@@ -890,4 +905,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let ChangeOnMd = "md/lg"
     public static let BpSpecificWeb = "lg"
     public static let BpSpecificApp = "regular"
+
 }

package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointMd600px.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class BreakpointMd600px {
-    public static let BreakpointName = "md"
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     public static let AccordionLabelFontFamily = "Lucida Grande"
@@ -444,6 +447,18 @@ public class BreakpointMd600px {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     public static let DocHeaderHeightSize = "160px"
 
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "md"
+
+
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
+
     // MARK: - Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     public static let BorderRadiusXs = "2px"
@@ -890,4 +905,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let ChangeOnMd = "md/lg"
     public static let BpSpecificWeb = "md"
     public static let BpSpecificApp = "regular"
+
 }

package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointSm390pxCompact.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class BreakpointSm390pxCompact {
-    public static let BreakpointName = "sm"
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     public static let AccordionLabelFontFamily = "Lucida Grande"
@@ -444,6 +447,18 @@ public class BreakpointSm390pxCompact {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     public static let DocHeaderHeightSize = "144px"
 
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "sm"
+
+
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
+
     // MARK: - Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     public static let BorderRadiusXs = "2px"
@@ -890,4 +905,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let ChangeOnMd = "xs/sm"
     public static let BpSpecificWeb = "xs/sm"
     public static let BpSpecificApp = "compact"
+
 }

package/dist/ios/brands/advertorial/semantic/breakpoints/BreakpointXs320px.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class BreakpointXs320px {
-    public static let BreakpointName = "xs"
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     public static let AccordionLabelFontFamily = "Lucida Grande"
@@ -444,6 +447,18 @@ public class BreakpointXs320px {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     public static let DocHeaderHeightSize = "144px"
 
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "xs"
+
+
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
+
     // MARK: - Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     public static let BorderRadiusXs = "2px"
@@ -890,4 +905,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let ChangeOnMd = "xs/sm"
     public static let BpSpecificWeb = "xs/sm"
     public static let BpSpecificApp = "compact"
+
 }

package/dist/ios/brands/bild/density/DensityCompact.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensityCompact {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "6px"
@@ -25,4 +29,5 @@ public class DensityCompact {
     public static let InputFieldHeightSize = "36px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "16px"
+
 }

package/dist/ios/brands/bild/density/DensityDefault.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensityDefault {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "8px"
@@ -25,4 +29,5 @@ public class DensityDefault {
     public static let InputFieldHeightSize = "40px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "17px"
+
 }

package/dist/ios/brands/bild/density/DensitySpacious.swift

@@ -9,6 +9,10 @@
 import UIKit
 
 public class DensitySpacious {
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Button
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
     public static let ButtonContentGapSpace = "8px"
@@ -25,4 +29,5 @@ public class DensitySpacious {
     public static let InputFieldHeightSize = "48px"
     /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
     public static let InputFieldLabelFontSize = "19px"
+
 }

package/dist/ios/brands/bild/overrides/Brandcolormapping.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class Brandcolormapping {
-    // MARK: - Component
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     public static let ChipColorActive = UIColor(red: 0.867, green: 0.000, blue: 0.000, alpha: 1.000)
 
     // MARK: - Component - Avatar
@@ -85,6 +88,11 @@ public class Brandcolormapping {
     public static let TeaserTitleBackgroundGradientStart = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.700)
     public static let TeaserTitleBackgroundGradientStop = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.000)
 
+
+    // MARK: - ============================================
+    // MARK: - GLOBAL
+    // MARK: - ============================================
+
     // MARK: - Global - Attention
     /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
     public static let AccentColorPrimary = UIColor(red: 0.867, green: 0.000, blue: 0.000, alpha: 1.000)
@@ -150,4 +158,5 @@ public class Brandcolormapping {
     public static let KickerBgColorOnSurface = UIColor(red: 0.867, green: 0.000, blue: 0.000, alpha: 1.000)
     /** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
     public static let KickerBgColorOnSurfaceDark = UIColor(red: 0.549, green: 0.569, blue: 0.588, alpha: 1.000)
+
 }

package/dist/ios/brands/bild/overrides/Brandtokenmapping.swift

@@ -9,8 +9,10 @@
 import UIKit
 
 public class Brandtokenmapping {
-    public static let BrandName = "BILD"
-    // MARK: - Component
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     public static let ButtonLabelFontWeightSt = "600"
 
     // MARK: - Component - Accordion
@@ -154,6 +156,11 @@ public class Brandtokenmapping {
     // MARK: - Component - Teaser - superA
     public static let SuperAteaserTitleInlineSpace = "16px"
 
+
+    // MARK: - ============================================
+    // MARK: - GLOBAL
+    // MARK: - ============================================
+
     // MARK: - Global - Typography - FontFamily
     /** Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the kickers text styles font family parameter. */
     public static let KickerFontFamily = "Gotham XNarrow"
@@ -509,4 +516,12 @@ public class Brandtokenmapping {
     public static let HideOnAdvertorial = true
     public static let OnlyBild = true
     public static let OnlySportBild = false
+
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BrandName = "BILD"
+
 }

package/dist/ios/brands/bild/semantic/breakpoints/BreakpointLg1024pxRegular.swift

@@ -9,7 +9,10 @@
 import UIKit
 
 public class BreakpointLg1024pxRegular {
-    public static let BreakpointName = "lg"
+    // MARK: - ============================================
+    // MARK: - COMPONENT
+    // MARK: - ============================================
+
     // MARK: - Component - Accordion
     /** This variable exists specifically for changing the accordion font family across brands. It is subject to review. Bild: GothamXNarrow, SpoBi: Inter, Ads: LucindaGrande */
     public static let AccordionLabelFontFamily = "Gotham XNarrow"
@@ -444,6 +447,18 @@ public class BreakpointLg1024pxRegular {
     /** This variable is used on documentation headers that contain info about platfroms and component names. 144 - 144 - 160 - 180 */
     public static let DocHeaderHeightSize = "180px"
 
+
+    // MARK: - ============================================
+    // MARK: - OTHER
+    // MARK: - ============================================
+
+    public static let BreakpointName = "lg"
+
+
+    // MARK: - ============================================
+    // MARK: - SEMANTIC
+    // MARK: - ============================================
+
     // MARK: - Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
     public static let BorderRadiusXs = "2px"
@@ -890,4 +905,5 @@ Apply this token to the main frame of page layouts to simulate realistic maximum
     public static let ChangeOnMd = "md/lg"
     public static let BpSpecificWeb = "lg"
     public static let BpSpecificApp = "regular"
+
 }