@marioschmidt/design-system-tokens 1.0.61 → 1.0.63

package/dist/ios/brands/advertorial/semantic/sizeclass/SizingCompact.swift

@@ -0,0 +1,532 @@
+//
+// Do not edit directly, this file was auto-generated.
+//
+// BILD Design System Tokens v1.0.63
+// Generated by Style Dictionary
+//
+// Copyright (c) 2024 Axel Springer Deutschland GmbH
+//
+
+import SwiftUI
+
+/// Protocol for type-safe sizing access across Compact/Regular size classes
+public protocol AdvertorialSizingScheme: Sendable {
+    /// 24-24-32-32 – use for side paddings and gutters in responsive layouts
+    var gridSpaceRespLg: CGFloat { get }
+    /// 48-48-64-64 – use for side paddings and gutters in responsive layouts
+    var gridSpaceRespXl: CGFloat { get }
+    /// 12-12-12-16 – use for side paddings and gutters in responsive layouts
+    var gridSpaceRespBase: CGFloat { get }
+    /// 6-6-6-8 – use for side paddings and gutters in responsive layouts
+    var gridSpaceRespSm: CGFloat { get }
+    /// 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.
+    var pageInlineSpace: CGFloat { get }
+    /// 16-16-16-16 – use for fixed side paddings and gutters
+    var gridSpaceConstLg: CGFloat { get }
+    /// 12-12-12-12 – use for fixed side paddings and gutters
+    var gridSpaceConstSm: CGFloat { get }
+    /// Used to set the column count in Figma Layout guide Grids
+    var layoutGuideGridColums: CGFloat { get }
+    /// 36-36-48-48 – Use for vertical spacing between sections in a layout.
+    var sectionSpaceBase: CGFloat { get }
+    /// 72-72-96-96 – Use for vertical spacing between sections in a layout
+    var sectionSpaceLg: CGFloat { get }
+    /// 16-16-32-32 – Use for spacing after paragraphs in text content
+    var paragraphEndSpace: CGFloat { get }
+    /// 24-24-36-36 – Use for vertical spacing between subsections in a layout
+    var sectionSpaceSm: CGFloat { get }
+    /// 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.
+    var breakpointMinWidthSize: CGFloat { get }
+    /// 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.
+    var breakpointMaxWidthSize: CGFloat { get }
+    /// Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space.
+    var canvasHeightSizeWeb: CGFloat { get }
+    /// 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.
+    var contentMaxWidthMedium: CGFloat { get }
+    /// Use for content containers that should fill the full width of the page
+    var contentMaxWidthFull: CGFloat { get }
+    /// Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts.
+    var canvasWidthSizeWeb: CGFloat { get }
+    /// Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts.
+    var canvasWidthSizeApp: CGFloat { get }
+    /// Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space.
+    var canvasHeightSizeApp: CGFloat { get }
+    /// 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+    var title1FontSize: CGFloat { get }
+    /// 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+    var title2FontSize: CGFloat { get }
+    /// This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
+    var display1FontSize: CGFloat { get }
+    /// This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
+    var display2FontSize: CGFloat { get }
+    /// This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
+    var display3FontSize: CGFloat { get }
+    /// This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
+    var headline1FontSize: CGFloat { get }
+    /// This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
+    var headline2FontSize: CGFloat { get }
+    /// This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
+    var headline3FontSize: CGFloat { get }
+    /// This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
+    var headline4FontSize: CGFloat { get }
+    /// This variable is used on the body text style's font size parameter. It remains constant at 21.
+    var bodyFontSize: CGFloat { get }
+    /// This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
+    var label3FontSize: CGFloat { get }
+    /// This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
+    var label2FontSize: CGFloat { get }
+    /// This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
+    var label1FontSize: CGFloat { get }
+    /// 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
+    var label1FontSizeResponsive: CGFloat { get }
+    /// This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
+    var label4FontSize: CGFloat { get }
+    /// This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
+    var callout1FontSize: CGFloat { get }
+    /// This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
+    var footnote1FontSize: CGFloat { get }
+    /// This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
+    var footnote2FontSize: CGFloat { get }
+    /// 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.
+    var kicker1FontSize: CGFloat { get }
+    /// 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
+    var kicker2FontSize: CGFloat { get }
+    /// Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
+    var kicker3FontSize: CGFloat { get }
+    /// Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
+    var kicker4FontSize: CGFloat { get }
+    /// This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
+    var subheadline1FontSize: CGFloat { get }
+    /// 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
+    var quoteFontSize: CGFloat { get }
+    /// This variable references the bodyFontFamily variable from the branding collection.
+    var bodyFontFamily: String { get }
+    var calloutFontFamily: String { get }
+    var headlineFontFamily: String { get }
+    var footnoteFontFamily: String { get }
+    var labelFontFamily: String { get }
+    var kickerFontFamily: String { get }
+    var subheadlineFontFamily: String { get }
+    var titleFontFamily: String { get }
+    var quoteFontFamily: String { get }
+    var displayFontFamily: String { get }
+    var calloutFontWeight: CGFloat { get }
+    var labelFontWeightBold: CGFloat { get }
+    var labelFontWeightBook: CGFloat { get }
+    var bodyFontWeightBook: CGFloat { get }
+    var bodyFontWeightBold: CGFloat { get }
+    var kickerFontWeight: CGFloat { get }
+    var kickerFontWeightSt: String { get }
+    var subheadlineFontWeight: CGFloat { get }
+    var headline1FontWeight: CGFloat { get }
+    var headline2FontWeight: CGFloat { get }
+    var headline3FontWeight: CGFloat { get }
+    var headline4FontWeight: CGFloat { get }
+    /// This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+    var headline1FontWeightSt: String { get }
+    var titleFontWeight: CGFloat { get }
+    var displayFontWeight: CGFloat { get }
+    var quoteFontWeight: CGFloat { get }
+    var footnoteFontWeightBook: CGFloat { get }
+    var footnoteFontWeightBold: CGFloat { get }
+    /// Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height)
+    var bodyLineHeight: CGFloat { get }
+    var kicker4LineHeight: CGFloat { get }
+    var kicker3LineHeight: CGFloat { get }
+    var kicker2LineHeight: CGFloat { get }
+    var kicker1LineHeight: CGFloat { get }
+    var label3LineHeight: CGFloat { get }
+    /// This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
+    var label1LineHeight: CGFloat { get }
+    var label1ResponsiveLineHeight: CGFloat { get }
+    var label2LineHeight: CGFloat { get }
+    var label4LineHeight: CGFloat { get }
+    var display1LineHeight: CGFloat { get }
+    var display2LineHeight: CGFloat { get }
+    var display3LineHeight: CGFloat { get }
+    var title1LineHeight: CGFloat { get }
+    /// html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
+    var title2LineHeight: CGFloat { get }
+    /// This variable is used in the quote text style line height parameter.
+    var quoteLineHeight: CGFloat { get }
+    var footnote1LineHeight: CGFloat { get }
+    var footnote2LineHeight: CGFloat { get }
+    var headline1LineHeight: CGFloat { get }
+    var headline2LineHeight: CGFloat { get }
+    var headline3LineHeight: CGFloat { get }
+    var headline4LineHeight: CGFloat { get }
+    var calloutLineHeight: CGFloat { get }
+    var subheadline1LineHeight: CGFloat { get }
+    /// 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.
+    var letterSpacingPositiveSm: CGFloat { get }
+    /// 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.
+    var letterSpacingPositiveLg: CGFloat { get }
+    /// 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.
+    var letterSpacingPositiveMd: CGFloat { get }
+    /// 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.
+    var letterSpacingNone: CGFloat { get }
+    /// -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.
+    var letterSpacingNegativeSm: CGFloat { get }
+    /// -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.
+    var letterSpacingNegativeMd: CGFloat { get }
+    /// -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.
+    var letterSpacingNegativeLg: CGFloat { get }
+    /// -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.
+    var letterSpacingNegativeXs: CGFloat { get }
+    /// 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.
+    var letterSpacingPositiveXs: CGFloat { get }
+    /// -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.
+    var display1LetterSpacing: CGFloat { get }
+    /// -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.
+    var display2LetterSpacing: CGFloat { get }
+    /// -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.
+    var display3LetterSpacing: CGFloat { get }
+    /// 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
+    var borderRadiusXs: CGFloat { get }
+    /// 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
+    var borderRadiusMd: CGFloat { get }
+    /// 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls.
+    var borderRadiusSm: CGFloat { get }
+    /// 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
+    var borderRadiusXl: CGFloat { get }
+    /// 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
+    var borderRadiusLg: CGFloat { get }
+    /// 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements.
+    var borderRadiusNone: CGFloat { get }
+    /// creates fully rounded shapes, typically used for circular elements like avatars.
+    var borderRadiusFull: CGFloat { get }
+    /// 1-1-1-1 – use for subtle outlines and dividers
+    var borderWidthThin: CGFloat { get }
+    /// 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
+    var borderWidthThick: CGFloat { get }
+    /// 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.
+    var borderWidthHairline: CGFloat { get }
+    var changeOnLg: String { get }
+    /// 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.
+    var changeOnMd: String { get }
+    var bpSpecificWeb: String { get }
+    var bpSpecificApp: String { get }
+    /// 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+    var inlineSpaceRespSm: CGFloat { get }
+    /// 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints
+    var inlineSpaceRespMd: CGFloat { get }
+    /// 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+    var inlineSpaceRespLg: CGFloat { get }
+    /// 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+    var inlineSpaceResp2Xl: CGFloat { get }
+    /// 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
+    var inlineSpaceRespXl: CGFloat { get }
+    /// 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConstSm: CGFloat { get }
+    /// 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConstMd: CGFloat { get }
+    /// 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConstLg: CGFloat { get }
+    /// 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConst2Xl: CGFloat { get }
+    /// 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConstXl: CGFloat { get }
+    /// 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConstXs: CGFloat { get }
+    /// 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConst3Xs: CGFloat { get }
+    /// 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
+    var inlineSpaceConst2Xs: CGFloat { get }
+    /// 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+    var stackSpaceRespMd: CGFloat { get }
+    /// 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+    var stackSpaceRespLg: CGFloat { get }
+    /// 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+    var stackSpaceResp2Xl: CGFloat { get }
+    /// 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+    var stackSpaceRespSm: CGFloat { get }
+    /// 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
+    var stackSpaceRespXl: CGFloat { get }
+    /// 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConstSm: CGFloat { get }
+    /// 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConstMd: CGFloat { get }
+    /// 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConstLg: CGFloat { get }
+    /// 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConst2Xl: CGFloat { get }
+    /// 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConstXl: CGFloat { get }
+    /// 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConstXs: CGFloat { get }
+    /// 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConst3Xs: CGFloat { get }
+    /// 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
+    var stackSpaceConst2Xs: CGFloat { get }
+    /// 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceRespXs: CGFloat { get }
+    /// 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceRespLg: CGFloat { get }
+    /// 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceRespXl: CGFloat { get }
+    /// 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceResp2Xl: CGFloat { get }
+    /// 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceRespMd: CGFloat { get }
+    /// 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceRespSm: CGFloat { get }
+    /// 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceResp2Xs: CGFloat { get }
+    /// 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
+    var gapSpaceResp3Xl: CGFloat { get }
+    /// 2-2-2-2 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConst2Xs: CGFloat { get }
+    /// 4-4-4-4 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConstXs: CGFloat { get }
+    /// 8-8-8-8 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConstSm: CGFloat { get }
+    /// 12-12-12-12 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConstMd: CGFloat { get }
+    /// 16-16-16-16 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConstLg: CGFloat { get }
+    /// 24-24-24-24 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConstXl: CGFloat { get }
+    /// 32-32-32-32 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConst2Xl: CGFloat { get }
+    /// 48-48-48-48 – Use for fixed gaps between items inside of UI elements
+    var gapSpaceConst3Xl: CGFloat { get }
+    /// 16-16-16-16 – Use for setting fixed height and width of UI elements
+    var sizeConst3Xs: CGFloat { get }
+    /// 24-24-24-24 – Use for setting fixed height and width of UI elements
+    var sizeConst2Xs: CGFloat { get }
+    /// 32-32-32-32 – Use for setting fixed height and width of UI elements
+    var sizeConstXs: CGFloat { get }
+    /// 40-40-40-40 – Use for setting fixed height and width of UI elements
+    var sizeConstSm: CGFloat { get }
+    /// 48-48-48-48 Use for setting fixed height and width of UI elements
+    var sizeConstMd: CGFloat { get }
+    /// 56-56-56-56 – Use for setting fixed height and width of UI elements
+    var sizeConstLg: CGFloat { get }
+    /// 64-64-64-64 – Use for setting fixed height and width of UI elements
+    var sizeConstXl: CGFloat { get }
+    /// 96-96-96-96 – Use for setting fixed height and width of UI elements
+    var sizeConst3Xl: CGFloat { get }
+    /// 148-148-148-148 – Use for setting fixed height and width of UI elements
+    var sizeConst4Xl: CGFloat { get }
+    /// 72-72-72-72 – Use for setting fixed height and width of UI elements
+    var sizeConst2Xl: CGFloat { get }
+    /// 8-8-8-8 – Use for setting fixed height and width of UI elements
+    var sizeConst4Xs: CGFloat { get }
+    /// 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp3Xs: CGFloat { get }
+    /// 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp2Xs: CGFloat { get }
+    /// 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeRespXs: CGFloat { get }
+    /// 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeRespSm: CGFloat { get }
+    /// 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeRespMd: CGFloat { get }
+    /// 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeRespLg: CGFloat { get }
+    /// 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeRespXl: CGFloat { get }
+    /// 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp2Xl: CGFloat { get }
+    /// 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp3Xl: CGFloat { get }
+    /// 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp4Xl: CGFloat { get }
+    /// 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
+    var sizeResp4Xs: CGFloat { get }
+    var breakpointName: String { get }
+}
+
+/// Compact size class implementation
+public struct AdvertorialSizingCompact: AdvertorialSizingScheme, DesignSizingScheme {
+    public static let shared = AdvertorialSizingCompact()
+    private init() {}
+
+    public let gridSpaceRespLg: CGFloat = 24
+    public let gridSpaceRespXl: CGFloat = 48
+    public let gridSpaceRespBase: CGFloat = 12
+    public let gridSpaceRespSm: CGFloat = 6
+    public let pageInlineSpace: CGFloat = 0
+    public let gridSpaceConstLg: CGFloat = 16
+    public let gridSpaceConstSm: CGFloat = 12
+    public let layoutGuideGridColums: CGFloat = 4
+    public let sectionSpaceBase: CGFloat = 36
+    public let sectionSpaceLg: CGFloat = 72
+    public let paragraphEndSpace: CGFloat = 16
+    public let sectionSpaceSm: CGFloat = 24
+    public let breakpointMinWidthSize: CGFloat = 390
+    public let breakpointMaxWidthSize: CGFloat = 599
+    public let canvasHeightSizeWeb: CGFloat = 844
+    public let contentMaxWidthMedium: CGFloat = 700
+    public let contentMaxWidthFull: CGFloat = 1024
+    public let canvasWidthSizeWeb: CGFloat = 390
+    public let canvasWidthSizeApp: CGFloat = 390
+    public let canvasHeightSizeApp: CGFloat = 844
+    public let title1FontSize: CGFloat = 22
+    public let title2FontSize: CGFloat = 14
+    public let display1FontSize: CGFloat = 39
+    public let display2FontSize: CGFloat = 35
+    public let display3FontSize: CGFloat = 27
+    public let headline1FontSize: CGFloat = 36
+    public let headline2FontSize: CGFloat = 30
+    public let headline3FontSize: CGFloat = 24
+    public let headline4FontSize: CGFloat = 16
+    public let bodyFontSize: CGFloat = 17
+    public let label3FontSize: CGFloat = 12
+    public let label2FontSize: CGFloat = 15
+    public let label1FontSize: CGFloat = 17
+    public let label1FontSizeResponsive: CGFloat = 10
+    public let label4FontSize: CGFloat = 8
+    public let callout1FontSize: CGFloat = 16
+    public let footnote1FontSize: CGFloat = 13
+    public let footnote2FontSize: CGFloat = 10
+    public let kicker1FontSize: CGFloat = 16
+    public let kicker2FontSize: CGFloat = 16
+    public let kicker3FontSize: CGFloat = 14
+    public let kicker4FontSize: CGFloat = 12
+    public let subheadline1FontSize: CGFloat = 18
+    public let quoteFontSize: CGFloat = 16
+    public let bodyFontFamily: String = "Lucida Grande"
+    public let calloutFontFamily: String = "Lucida Grande"
+    public let headlineFontFamily: String = "Lucida Grande"
+    public let footnoteFontFamily: String = "Lucida Grande"
+    public let labelFontFamily: String = "Lucida Grande"
+    public let kickerFontFamily: String = "Lucida Grande"
+    public let subheadlineFontFamily: String = "Lucida Grande"
+    public let titleFontFamily: String = "Lucida Grande"
+    public let quoteFontFamily: String = "Lucida Grande"
+    public let displayFontFamily: String = "Lucida Grande"
+    public let calloutFontWeight: CGFloat = 800
+    public let labelFontWeightBold: CGFloat = 700
+    public let labelFontWeightBook: CGFloat = 400
+    public let bodyFontWeightBook: CGFloat = 400
+    public let bodyFontWeightBold: CGFloat = 700
+    public let kickerFontWeight: CGFloat = 700
+    public let kickerFontWeightSt: String = "700"
+    public let subheadlineFontWeight: CGFloat = 700
+    public let headline1FontWeight: CGFloat = 700
+    public let headline2FontWeight: CGFloat = 700
+    public let headline3FontWeight: CGFloat = 700
+    public let headline4FontWeight: CGFloat = 600
+    public let headline1FontWeightSt: String = "700"
+    public let titleFontWeight: CGFloat = 800
+    public let displayFontWeight: CGFloat = 800
+    public let quoteFontWeight: CGFloat = 800
+    public let footnoteFontWeightBook: CGFloat = 400
+    public let footnoteFontWeightBold: CGFloat = 700
+    public let bodyLineHeight: CGFloat = 29.75
+    public let kicker4LineHeight: CGFloat = 13.2
+    public let kicker3LineHeight: CGFloat = 15.4
+    public let kicker2LineHeight: CGFloat = 17.6
+    public let kicker1LineHeight: CGFloat = 17.6
+    public let label3LineHeight: CGFloat = 14.4
+    public let label1LineHeight: CGFloat = 20.4
+    public let label1ResponsiveLineHeight: CGFloat = 10
+    public let label2LineHeight: CGFloat = 16
+    public let label4LineHeight: CGFloat = 10
+    public let display1LineHeight: CGFloat = 40
+    public let display2LineHeight: CGFloat = 36
+    public let display3LineHeight: CGFloat = 28
+    public let title1LineHeight: CGFloat = 26.4
+    public let title2LineHeight: CGFloat = 16.8
+    public let quoteLineHeight: CGFloat = 20.8
+    public let footnote1LineHeight: CGFloat = 16.9
+    public let footnote2LineHeight: CGFloat = 13
+    public let headline1LineHeight: CGFloat = 37.8
+    public let headline2LineHeight: CGFloat = 33
+    public let headline3LineHeight: CGFloat = 26.4
+    public let headline4LineHeight: CGFloat = 18.4
+    public let calloutLineHeight: CGFloat = 20.8
+    public let subheadline1LineHeight: CGFloat = 23.4
+    public let letterSpacingPositiveSm: CGFloat = 0.5
+    public let letterSpacingPositiveLg: CGFloat = 2
+    public let letterSpacingPositiveMd: CGFloat = 1
+    public let letterSpacingNone: CGFloat = 0
+    public let letterSpacingNegativeSm: CGFloat = -0.5
+    public let letterSpacingNegativeMd: CGFloat = -1
+    public let letterSpacingNegativeLg: CGFloat = -2
+    public let letterSpacingNegativeXs: CGFloat = -0.25
+    public let letterSpacingPositiveXs: CGFloat = 0.25
+    public let display1LetterSpacing: CGFloat = -0.5
+    public let display2LetterSpacing: CGFloat = -0.5
+    public let display3LetterSpacing: CGFloat = -0.5
+    public let borderRadiusXs: CGFloat = 2
+    public let borderRadiusMd: CGFloat = 8
+    public let borderRadiusSm: CGFloat = 4
+    public let borderRadiusXl: CGFloat = 24
+    public let borderRadiusLg: CGFloat = 16
+    public let borderRadiusNone: CGFloat = 0
+    public let borderRadiusFull: CGFloat = 9999
+    public let borderWidthThin: CGFloat = 1
+    public let borderWidthThick: CGFloat = 2
+    public let borderWidthHairline: CGFloat = 0.33
+    public let changeOnLg: String = "xs/sm/md"
+    public let changeOnMd: String = "xs/sm"
+    public let bpSpecificWeb: String = "xs/sm"
+    public let bpSpecificApp: String = "compact"
+    public let inlineSpaceRespSm: CGFloat = 8
+    public let inlineSpaceRespMd: CGFloat = 12
+    public let inlineSpaceRespLg: CGFloat = 16
+    public let inlineSpaceResp2Xl: CGFloat = 32
+    public let inlineSpaceRespXl: CGFloat = 24
+    public let inlineSpaceConstSm: CGFloat = 8
+    public let inlineSpaceConstMd: CGFloat = 12
+    public let inlineSpaceConstLg: CGFloat = 16
+    public let inlineSpaceConst2Xl: CGFloat = 32
+    public let inlineSpaceConstXl: CGFloat = 24
+    public let inlineSpaceConstXs: CGFloat = 6
+    public let inlineSpaceConst3Xs: CGFloat = 2
+    public let inlineSpaceConst2Xs: CGFloat = 4
+    public let stackSpaceRespMd: CGFloat = 12
+    public let stackSpaceRespLg: CGFloat = 16
+    public let stackSpaceResp2Xl: CGFloat = 32
+    public let stackSpaceRespSm: CGFloat = 8
+    public let stackSpaceRespXl: CGFloat = 24
+    public let stackSpaceConstSm: CGFloat = 8
+    public let stackSpaceConstMd: CGFloat = 12
+    public let stackSpaceConstLg: CGFloat = 16
+    public let stackSpaceConst2Xl: CGFloat = 32
+    public let stackSpaceConstXl: CGFloat = 24
+    public let stackSpaceConstXs: CGFloat = 6
+    public let stackSpaceConst3Xs: CGFloat = 2
+    public let stackSpaceConst2Xs: CGFloat = 4
+    public let gapSpaceRespXs: CGFloat = 4
+    public let gapSpaceRespLg: CGFloat = 16
+    public let gapSpaceRespXl: CGFloat = 24
+    public let gapSpaceResp2Xl: CGFloat = 32
+    public let gapSpaceRespMd: CGFloat = 12
+    public let gapSpaceRespSm: CGFloat = 8
+    public let gapSpaceResp2Xs: CGFloat = 2
+    public let gapSpaceResp3Xl: CGFloat = 48
+    public let gapSpaceConst2Xs: CGFloat = 2
+    public let gapSpaceConstXs: CGFloat = 4
+    public let gapSpaceConstSm: CGFloat = 8
+    public let gapSpaceConstMd: CGFloat = 12
+    public let gapSpaceConstLg: CGFloat = 16
+    public let gapSpaceConstXl: CGFloat = 24
+    public let gapSpaceConst2Xl: CGFloat = 32
+    public let gapSpaceConst3Xl: CGFloat = 48
+    public let sizeConst3Xs: CGFloat = 16
+    public let sizeConst2Xs: CGFloat = 24
+    public let sizeConstXs: CGFloat = 32
+    public let sizeConstSm: CGFloat = 40
+    public let sizeConstMd: CGFloat = 48
+    public let sizeConstLg: CGFloat = 56
+    public let sizeConstXl: CGFloat = 64
+    public let sizeConst3Xl: CGFloat = 96
+    public let sizeConst4Xl: CGFloat = 148
+    public let sizeConst2Xl: CGFloat = 72
+    public let sizeConst4Xs: CGFloat = 8
+    public let sizeResp3Xs: CGFloat = 16
+    public let sizeResp2Xs: CGFloat = 24
+    public let sizeRespXs: CGFloat = 32
+    public let sizeRespSm: CGFloat = 40
+    public let sizeRespMd: CGFloat = 48
+    public let sizeRespLg: CGFloat = 56
+    public let sizeRespXl: CGFloat = 64
+    public let sizeResp2Xl: CGFloat = 72
+    public let sizeResp3Xl: CGFloat = 96
+    public let sizeResp4Xl: CGFloat = 148
+    public let sizeResp4Xs: CGFloat = 12
+    public let breakpointName: String = "sm"
+}