@marioschmidt/design-system-tokens 1.0.41 → 1.0.43

package/dist/flutter/brands/advertorial/semantic/breakpoints/breakpoint-lg-1024px-regular.dart

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.41
+// BILD Design System Tokens v1.0.43
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -21,21 +21,21 @@ class BreakpointLg1024pxRegular {
 
     // Semantic - Layout - Grid - Responsive
     /** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespLg = 32;
+    static const gridSpaceRespLg = "32px";
     /** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespXl = 64;
+    static const gridSpaceRespXl = "64px";
     /** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespBase = 16;
+    static const gridSpaceRespBase = "16px";
     /** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
-    static const gridSpaceRespSm = 8;
+    static const gridSpaceRespSm = "8px";
     /** 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. */
-    static const pageInlineSpace = 16;
+    static const pageInlineSpace = "16px";
 
     // Semantic - Layout - Grid - Constant
     /** 16-16-16-16 – use for fixed side paddings and gutters */
-    static const gridSpaceConstLg = 16;
+    static const gridSpaceConstLg = "16px";
     /** 12-12-12-12 – use for fixed side paddings and gutters */
-    static const gridSpaceConstSm = 12;
+    static const gridSpaceConstSm = "12px";
 
     // Semantic - Layout - Grid - LayoutGuide
     /** Used to set the column count in Figma Layout guide Grids */
@@ -43,103 +43,103 @@ class BreakpointLg1024pxRegular {
 
     // Semantic - Layout - Section
     /** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
-    static const sectionSpaceBase = 48;
+    static const sectionSpaceBase = "48px";
     /** 72-72-96-96 – Use for vertical spacing between sections in a layout */
-    static const sectionSpaceLg = 96;
+    static const sectionSpaceLg = "96px";
     /** 16-16-32-32 – Use for spacing after paragraphs in text content */
-    static const paragraphEndSpace = 32;
+    static const paragraphEndSpace = "32px";
     /** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
-    static const sectionSpaceSm = 36;
+    static const sectionSpaceSm = "36px";
 
     // Semantic - Layout - Breakpoints
     /** 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. */
-    static const breakpointMinWidthSize = 1024;
+    static const breakpointMinWidthSize = "1024px";
     /** 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. */
-    static const breakpointMaxWidthSize = 1024;
+    static const breakpointMaxWidthSize = "1024px";
 
     // Semantic - Layout
     /** Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-    static const canvasHeightSizeWeb = 768;
+    static const canvasHeightSizeWeb = "768px";
     /** Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. */
-    static const canvasWidthSizeWeb = 1024;
+    static const canvasWidthSizeWeb = "1024px";
     /** Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. */
-    static const canvasWidthSizeApp = 1194;
+    static const canvasWidthSizeApp = "1194px";
     /** Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-    static const canvasHeightSizeApp = 834;
+    static const canvasHeightSizeApp = "834px";
 
     // Semantic - Layout - ContentWidth
     /** 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. */
-    static const contentMaxWidthMedium = 700;
+    static const contentMaxWidthMedium = "700px";
     /** Use for content containers that should fill the full width of the page */
-    static const contentMaxWidthFull = 1024;
+    static const contentMaxWidthFull = "1024px";
 
     // Semantic - Typography - FontSize - Title
     /** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title1FontSize = 28;
+    static const title1FontSize = "28px";
     /** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title2FontSize = 18;
+    static const title2FontSize = "18px";
 
     // Semantic - Typography - FontSize - Display
     /** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
-    static const display1FontSize = 116;
+    static const display1FontSize = "116px";
     /** This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 */
-    static const display2FontSize = 62;
+    static const display2FontSize = "62px";
     /** This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 */
-    static const display3FontSize = 39;
+    static const display3FontSize = "39px";
 
     // Semantic - Typography - FontSize - Headline
     /** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
-    static const headline1FontSize = 70;
+    static const headline1FontSize = "70px";
     /** This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 */
-    static const headline2FontSize = 48;
+    static const headline2FontSize = "48px";
     /** This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 */
-    static const headline3FontSize = 32;
+    static const headline3FontSize = "32px";
     /** This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 */
-    static const headline4FontSize = 22;
+    static const headline4FontSize = "22px";
 
     // Semantic - Typography - FontSize - Body
     /** This variable is used on the body text style's font size parameter. It remains constant at 21. */
-    static const bodyFontSize = 17;
+    static const bodyFontSize = "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. */
-    static const label3FontSize = 12;
+    static const label3FontSize = "12px";
     /** This variable controls the label2 text style's font size parameter. Its value remains constant at 15. */
-    static const label2FontSize = 15;
+    static const label2FontSize = "15px";
     /** This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. */
-    static const label1FontSize = 17;
+    static const label1FontSize = "17px";
     /** 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. */
-    static const label1FontSizeResponsive = 17;
+    static const label1FontSizeResponsive = "17px";
     /** This token is used in the font size parameter of the label4 text style. The value remains constant at 8. */
-    static const label4FontSize = 8;
+    static const label4FontSize = "8px";
 
     // Semantic - Typography - FontSize - Callout
     /** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
-    static const callout1FontSize = 22;
+    static const callout1FontSize = "22px";
 
     // Semantic - Typography - FontSize - Footnote
     /** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
-    static const footnote1FontSize = 15;
+    static const footnote1FontSize = "15px";
     /** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
-    static const footnote2FontSize = 13;
+    static const footnote2FontSize = "13px";
 
     // 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. */
-    static const kicker1FontSize = 25;
+    static const kicker1FontSize = "25px";
     /** 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 */
-    static const kicker2FontSize = 21;
+    static const kicker2FontSize = "21px";
     /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
-    static const kicker3FontSize = 16;
+    static const kicker3FontSize = "16px";
     /** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
-    static const kicker4FontSize = 14;
+    static const kicker4FontSize = "14px";
 
     // Semantic - Typography - FontSize - Subheadline
     /** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
-    static const subheadline1FontSize = 28;
+    static const subheadline1FontSize = "28px";
 
     // Semantic - Typography - FontSize - Quote
     /** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
-    static const quoteFontSize = 18;
+    static const quoteFontSize = "18px";
 
     // Semantic - Typography - FontFamily
     /** This variable references the bodyFontFamily variable from the branding collection. */
@@ -195,103 +195,103 @@ class BreakpointLg1024pxRegular {
 
     // Semantic - Typography - LineHeight - Body
     /** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
-    static const bodyLineHeight = 29.75;
+    static const bodyLineHeight = "29.75px";
 
     // Semantic - Typography - LineHeight - Kicker
-    static const kicker4LineHeight = 15.399999618530273;
-    static const kicker3LineHeight = 17.600000381469727;
-    static const kicker2LineHeight = 23.100000381469727;
-    static const kicker1LineHeight = 27.5;
+    static const kicker4LineHeight = "15.4px";
+    static const kicker3LineHeight = "17.6px";
+    static const kicker2LineHeight = "23.1px";
+    static const kicker1LineHeight = "27.5px";
 
     // Semantic - Typography - LineHeight - Label
-    static const label3LineHeight = 14.399999618530273;
+    static const label3LineHeight = "14.4px";
     /** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
-    static const label1LineHeight = 20.399999618530273;
-    static const label1ResponsiveLineHeight = 17;
-    static const label2LineHeight = 16;
-    static const label4LineHeight = 10;
+    static const label1LineHeight = "20.4px";
+    static const label1ResponsiveLineHeight = "17px";
+    static const label2LineHeight = "16px";
+    static const label4LineHeight = "10px";
 
     // Semantic - Typography - LineHeight - Display
-    static const display1LineHeight = 120;
-    static const display2LineHeight = 64;
-    static const display3LineHeight = 40;
+    static const display1LineHeight = "120px";
+    static const display2LineHeight = "64px";
+    static const display3LineHeight = "40px";
 
     // Semantic - Typography - LineHeight - Title
-    static const title1LineHeight = 33.599998474121094;
+    static const title1LineHeight = "33.6px";
     /** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-    static const title2LineHeight = 23.399999618530273;
+    static const title2LineHeight = "23.4px";
 
     // Semantic - Typography - LineHeight - Quote
     /** This variable is used in the quote text style line height parameter. */
-    static const quoteLineHeight = 23.399999618530273;
+    static const quoteLineHeight = "23.4px";
 
     // Semantic - Typography - LineHeight - Footnote
-    static const footnote1LineHeight = 19.5;
-    static const footnote2LineHeight = 16.899999618530273;
+    static const footnote1LineHeight = "19.5px";
+    static const footnote2LineHeight = "16.9px";
 
     // Semantic - Typography - LineHeight - Headline
-    static const headline1LineHeight = 77;
-    static const headline2LineHeight = 52.79999923706055;
-    static const headline3LineHeight = 35.20000076293945;
-    static const headline4LineHeight = 27.5;
+    static const headline1LineHeight = "77px";
+    static const headline2LineHeight = "52.8px";
+    static const headline3LineHeight = "35.2px";
+    static const headline4LineHeight = "27.5px";
 
     // Semantic - Typography - LineHeight - Callout
-    static const calloutLineHeight = 28.600000381469727;
+    static const calloutLineHeight = "28.6px";
 
     // Semantic - Typography - LineHeight - Subheadline
-    static const subheadline1LineHeight = 36.400001525878906;
+    static const subheadline1LineHeight = "36.4px";
 
     // 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. */
-    static const letterSpacingPositiveSm = 0.5;
+    static const letterSpacingPositiveSm = "0.5px";
     /** 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. */
-    static const letterSpacingPositiveLg = 3;
+    static const letterSpacingPositiveLg = "3px";
     /** 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. */
-    static const letterSpacingPositiveMd = 1;
+    static const letterSpacingPositiveMd = "1px";
     /** 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. */
-    static const letterSpacingNone = 0;
+    static const letterSpacingNone = "0px";
     /** -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. */
-    static const letterSpacingNegativeSm = -0.25;
+    static const letterSpacingNegativeSm = "-0.25px";
     /** -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. */
-    static const letterSpacingNegativeMd = -1;
+    static const letterSpacingNegativeMd = "-1px";
     /** -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. */
-    static const letterSpacingNegativeLg = -3;
+    static const letterSpacingNegativeLg = "-3px";
     /** -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. */
-    static const letterSpacingNegativeXs = -0.25;
+    static const letterSpacingNegativeXs = "-0.25px";
     /** 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. */
-    static const letterSpacingPositiveXs = 0.25;
+    static const letterSpacingPositiveXs = "0.25px";
 
     // 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. */
-    static const display1LetterSpacing = -2;
+    static const display1LetterSpacing = "-2px";
     /** -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. */
-    static const display2LetterSpacing = -1;
+    static const display2LetterSpacing = "-1px";
     /** -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. */
-    static const display3LetterSpacing = -1;
+    static const display3LetterSpacing = "-1px";
 
     // Semantic - Border - BorderRadius
     /** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
-    static const borderRadiusXs = 2;
+    static const borderRadiusXs = "2px";
     /** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
-    static const borderRadiusMd = 8;
+    static const borderRadiusMd = "8px";
     /** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
-    static const borderRadiusSm = 4;
+    static const borderRadiusSm = "4px";
     /** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
-    static const borderRadiusXl = 24;
+    static const borderRadiusXl = "24px";
     /** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
-    static const borderRadiusLg = 16;
+    static const borderRadiusLg = "16px";
     /** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
-    static const borderRadiusNone = 0;
+    static const borderRadiusNone = "0px";
     /** creates fully rounded shapes, typically used for circular elements like avatars. */
-    static const borderRadiusFull = 9999;
+    static const borderRadiusFull = "9999px";
 
     // Semantic - Border - BorderWidth
     /** 1-1-1-1 – use for subtle outlines and dividers */
-    static const borderWidthThin = 1;
+    static const borderWidthThin = "1px";
     /** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
-    static const borderWidthThick = 2;
+    static const borderWidthThick = "2px";
     /** 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. */
-    static const borderWidthHairline = 0.33000001311302185;
+    static const borderWidthHairline = "0.33px";
 
     // Semantic - Visibility - Boolean
     /** Use for showing elements on mobile viewport sizes only */
@@ -318,147 +318,147 @@ class BreakpointLg1024pxRegular {
 
     // Semantic - Space - Inline - Responsive
     /** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespSm = 16;
+    static const inlineSpaceRespSm = "16px";
     /** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespMd = 24;
+    static const inlineSpaceRespMd = "24px";
     /** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespLg = 32;
+    static const inlineSpaceRespLg = "32px";
     /** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceResp2Xl = 64;
+    static const inlineSpaceResp2Xl = "64px";
     /** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-    static const inlineSpaceRespXl = 40;
+    static const inlineSpaceRespXl = "40px";
 
     // Semantic - Space - Inline - Constant
     /** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstSm = 8;
+    static const inlineSpaceConstSm = "8px";
     /** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstMd = 12;
+    static const inlineSpaceConstMd = "12px";
     /** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstLg = 16;
+    static const inlineSpaceConstLg = "16px";
     /** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst2Xl = 32;
+    static const inlineSpaceConst2Xl = "32px";
     /** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstXl = 24;
+    static const inlineSpaceConstXl = "24px";
     /** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConstXs = 6;
+    static const inlineSpaceConstXs = "6px";
     /** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst3Xs = 2;
+    static const inlineSpaceConst3Xs = "2px";
     /** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
-    static const inlineSpaceConst2Xs = 4;
+    static const inlineSpaceConst2Xs = "4px";
 
     // Semantic - Space - Stack - Responsive
     /** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespMd = 24;
+    static const stackSpaceRespMd = "24px";
     /** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespLg = 32;
+    static const stackSpaceRespLg = "32px";
     /** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceResp2Xl = 64;
+    static const stackSpaceResp2Xl = "64px";
     /** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespSm = 16;
+    static const stackSpaceRespSm = "16px";
     /** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-    static const stackSpaceRespXl = 40;
+    static const stackSpaceRespXl = "40px";
 
     // Semantic - Space - Stack - Constant
     /** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstSm = 8;
+    static const stackSpaceConstSm = "8px";
     /** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstMd = 12;
+    static const stackSpaceConstMd = "12px";
     /** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstLg = 16;
+    static const stackSpaceConstLg = "16px";
     /** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst2Xl = 32;
+    static const stackSpaceConst2Xl = "32px";
     /** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstXl = 24;
+    static const stackSpaceConstXl = "24px";
     /** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConstXs = 6;
+    static const stackSpaceConstXs = "6px";
     /** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst3Xs = 2;
+    static const stackSpaceConst3Xs = "2px";
     /** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
-    static const stackSpaceConst2Xs = 4;
+    static const stackSpaceConst2Xs = "4px";
 
     // Semantic - Space - Gap - Responsive
     /** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespXs = 8;
+    static const gapSpaceRespXs = "8px";
     /** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespLg = 32;
+    static const gapSpaceRespLg = "32px";
     /** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespXl = 48;
+    static const gapSpaceRespXl = "48px";
     /** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp2Xl = 64;
+    static const gapSpaceResp2Xl = "64px";
     /** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespMd = 24;
+    static const gapSpaceRespMd = "24px";
     /** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceRespSm = 16;
+    static const gapSpaceRespSm = "16px";
     /** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp2Xs = 6;
+    static const gapSpaceResp2Xs = "6px";
     /** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
-    static const gapSpaceResp3Xl = 96;
+    static const gapSpaceResp3Xl = "96px";
 
     // Semantic - Space - Gap - Constant
     /** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst2Xs = 2;
+    static const gapSpaceConst2Xs = "2px";
     /** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstXs = 4;
+    static const gapSpaceConstXs = "4px";
     /** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstSm = 8;
+    static const gapSpaceConstSm = "8px";
     /** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstMd = 12;
+    static const gapSpaceConstMd = "12px";
     /** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstLg = 16;
+    static const gapSpaceConstLg = "16px";
     /** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConstXl = 24;
+    static const gapSpaceConstXl = "24px";
     /** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst2Xl = 32;
+    static const gapSpaceConst2Xl = "32px";
     /** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
-    static const gapSpaceConst3Xl = 48;
+    static const gapSpaceConst3Xl = "48px";
 
     // Semantic - Size - Constant
     /** 16-16-16-16 – Use for setting fixed height and width of UI elements */
-    static const sizeConst3Xs = 16;
+    static const sizeConst3Xs = "16px";
     /** 24-24-24-24 – Use for setting fixed height and width of UI elements */
-    static const sizeConst2Xs = 24;
+    static const sizeConst2Xs = "24px";
     /** 32-32-32-32 – Use for setting fixed height and width of UI elements */
-    static const sizeConstXs = 32;
+    static const sizeConstXs = "32px";
     /** 40-40-40-40 – Use for setting fixed height and width of UI elements */
-    static const sizeConstSm = 40;
+    static const sizeConstSm = "40px";
     /** 48-48-48-48 Use for setting fixed height and width of UI elements */
-    static const sizeConstMd = 48;
+    static const sizeConstMd = "48px";
     /** 56-56-56-56 – Use for setting fixed height and width of UI elements */
-    static const sizeConstLg = 56;
+    static const sizeConstLg = "56px";
     /** 64-64-64-64 – Use for setting fixed height and width of UI elements */
-    static const sizeConstXl = 64;
+    static const sizeConstXl = "64px";
     /** 96-96-96-96 – Use for setting fixed height and width of UI elements */
-    static const sizeConst3Xl = 96;
+    static const sizeConst3Xl = "96px";
     /** 148-148-148-148 – Use for setting fixed height and width of UI elements */
-    static const sizeConst4Xl = 148;
+    static const sizeConst4Xl = "148px";
     /** 72-72-72-72 – Use for setting fixed height and width of UI elements */
-    static const sizeConst2Xl = 72;
+    static const sizeConst2Xl = "72px";
     /** 8-8-8-8 – Use for setting fixed height and width of UI elements */
-    static const sizeConst4Xs = 8;
+    static const sizeConst4Xs = "8px";
 
     // Semantic - Size - Responsive
     /** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp3Xs = 24;
+    static const sizeResp3Xs = "24px";
     /** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp2Xs = 32;
+    static const sizeResp2Xs = "32px";
     /** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespXs = 48;
+    static const sizeRespXs = "48px";
     /** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespSm = 56;
+    static const sizeRespSm = "56px";
     /** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespMd = 72;
+    static const sizeRespMd = "72px";
     /** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespLg = 92;
+    static const sizeRespLg = "92px";
     /** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeRespXl = 96;
+    static const sizeRespXl = "96px";
     /** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp2Xl = 100;
+    static const sizeResp2Xl = "100px";
     /** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp3Xl = 148;
+    static const sizeResp3Xl = "148px";
     /** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp4Xl = 180;
+    static const sizeResp4Xl = "180px";
     /** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
-    static const sizeResp4Xs = 16;
+    static const sizeResp4Xs = "16px";
 
 
     // ============================================