@marioschmidt/design-system-tokens 1.0.41 → 1.0.42

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

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