@marioschmidt/design-system-tokens 1.0.40 → 1.0.42

package/dist/css/brands/sportbild/semantic/breakpoints/breakpoint-md-600px.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.40
+ * BILD Design System Tokens v1.0.42
  * Generated by Style Dictionary v4.0.0
  * 
  * Brand: Sportbild | Context: breakpoint: md
@@ -21,33 +21,33 @@
   /**
    * 24-24-32-32 – use for side paddings and gutters in responsive layouts
    */
-  --grid-space-resp-lg: 32;
+  --grid-space-resp-lg: 32px;
   /**
    * 48-48-64-64 – use for side paddings and gutters in responsive layouts
    */
-  --grid-space-resp-xl: 64;
+  --grid-space-resp-xl: 64px;
   /**
    * 12-12-12-16 – use for side paddings and gutters in responsive layouts
    */
-  --grid-space-resp-base: 12;
+  --grid-space-resp-base: 12px;
   /**
    * 6-6-6-8 – use for side paddings and gutters in responsive layouts
    */
-  --grid-space-resp-sm: 6;
+  --grid-space-resp-sm: 6px;
   /**
    * 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.
    */
-  --page-inline-space: 0;
+  --page-inline-space: 0px;
 
   /* Semantic - Layout - Grid - Constant */
   /**
    * 16-16-16-16 – use for fixed side paddings and gutters
    */
-  --grid-space-const-lg: 16;
+  --grid-space-const-lg: 16px;
   /**
    * 12-12-12-12 – use for fixed side paddings and gutters
    */
-  --grid-space-const-sm: 12;
+  --grid-space-const-sm: 12px;
 
   /* Semantic - Layout - Grid - LayoutGuide */
   /**
@@ -59,173 +59,173 @@
   /**
    * 36-36-48-48 – Use for vertical spacing between sections in a layout.
    */
-  --section-space-base: 48;
+  --section-space-base: 48px;
   /**
    * 72-72-96-96 – Use for vertical spacing between sections in a layout
    */
-  --section-space-lg: 96;
+  --section-space-lg: 96px;
   /**
    * 16-16-32-32 – Use for spacing after paragraphs in text content
    */
-  --paragraph-end-space: 32;
+  --paragraph-end-space: 32px;
   /**
    * 24-24-36-36 – Use for vertical spacing between subsections in a layout
    */
-  --section-space-sm: 36;
+  --section-space-sm: 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.
    */
-  --breakpoint-min-width-size: 600;
+  --breakpoint-min-width-size: 600px;
   /**
    * 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.
    */
-  --breakpoint-max-width-size: 1023;
+  --breakpoint-max-width-size: 1023px;
 
   /* 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.
    */
-  --canvas-height-size-web: 960;
+  --canvas-height-size-web: 960px;
   /**
    * Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts.
    */
-  --canvas-width-size-web: 600;
+  --canvas-width-size-web: 600px;
   /**
    * Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts.
    */
-  --canvas-width-size-app: 834;
+  --canvas-width-size-app: 834px;
   /**
    * Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space.
    */
-  --canvas-height-size-app: 1194;
+  --canvas-height-size-app: 1194px;
 
   /* 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.
    */
-  --content-max-width-medium: 700;
+  --content-max-width-medium: 700px;
   /**
    * Use for content containers that should fill the full width of the page
    */
-  --content-max-width-full: 1024;
+  --content-max-width-full: 1024px;
 
   /* Semantic - Typography - FontSize - Title */
   /**
    * 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --title1-font-size: 28;
+  --title1-font-size: 28px;
   /**
    * 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --title2-font-size: 18;
+  --title2-font-size: 18px;
 
   /* Semantic - Typography - FontSize - Display */
   /**
    * This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120
    */
-  --display1-font-size: 68;
+  --display1-font-size: 68px;
   /**
    * This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64
    */
-  --display2-font-size: 40;
+  --display2-font-size: 40px;
   /**
    * This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40
    */
-  --display3-font-size: 30;
+  --display3-font-size: 30px;
 
   /* Semantic - Typography - FontSize - Headline */
   /**
    * This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100
    */
-  --headline1-font-size: 60;
+  --headline1-font-size: 60px;
   /**
    * This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64
    */
-  --headline2-font-size: 44;
+  --headline2-font-size: 44px;
   /**
    * This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40
    */
-  --headline3-font-size: 30;
+  --headline3-font-size: 30px;
   /**
    * This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32
    */
-  --headline4-font-size: 26;
+  --headline4-font-size: 26px;
 
   /* Semantic - Typography - FontSize - Body */
   /**
    * This variable is used on the body text style's font size parameter. It remains constant at 21.
    */
-  --body-font-size: 17;
+  --body-font-size: 17px;
 
   /* Semantic - Typography - FontSize - Label */
   /**
    * This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes.
    */
-  --label3-font-size: 12;
+  --label3-font-size: 12px;
   /**
    * This variable controls the label2 text style's font size parameter. Its value remains constant at 15.
    */
-  --label2-font-size: 15;
+  --label2-font-size: 15px;
   /**
    * This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
    */
-  --label1-font-size: 17;
+  --label1-font-size: 17px;
   /**
    * 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
    */
-  --label1-font-size-responsive: 15;
+  --label1-font-size-responsive: 15px;
   /**
    * This token is used in the font size parameter of the label4 text style. The value remains constant at 8.
    */
-  --label4-font-size: 8;
+  --label4-font-size: 8px;
 
   /* Semantic - Typography - FontSize - Callout */
   /**
    * This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
    */
-  --callout1-font-size: 24;
+  --callout1-font-size: 24px;
 
   /* Semantic - Typography - FontSize - Footnote */
   /**
    * This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18
    */
-  --footnote1-font-size: 13;
+  --footnote1-font-size: 13px;
   /**
    * This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16
    */
-  --footnote2-font-size: 10;
+  --footnote2-font-size: 10px;
 
   /* Semantic - Typography - FontSize - Kicker */
   /**
    * Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size.
    */
-  --kicker1-font-size: 26;
+  --kicker1-font-size: 26px;
   /**
    * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24
    */
-  --kicker2-font-size: 26;
+  --kicker2-font-size: 26px;
   /**
    * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20
    */
-  --kicker3-font-size: 20;
+  --kicker3-font-size: 20px;
   /**
    * Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16
    */
-  --kicker4-font-size: 16;
+  --kicker4-font-size: 16px;
 
   /* Semantic - Typography - FontSize - Subheadline */
   /**
    * This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36
    */
-  --subheadline1-font-size: 22;
+  --subheadline1-font-size: 22px;
 
   /* Semantic - Typography - FontSize - Quote */
   /**
    * 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style.
    */
-  --quote-font-size: 18;
+  --quote-font-size: 18px;
 
   /* Semantic - Typography - FontFamily */
   /**
@@ -287,153 +287,153 @@
   /**
    * Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height)
    */
-  --body-line-height: 29.75;
+  --body-line-height: 29.75px;
 
   /* Semantic - Typography - LineHeight - Kicker */
-  --kicker4-line-height: 17.600000381469727;
-  --kicker3-line-height: 22;
-  --kicker2-line-height: 28.600000381469727;
-  --kicker1-line-height: 28.600000381469727;
+  --kicker4-line-height: 17.6px;
+  --kicker3-line-height: 22px;
+  --kicker2-line-height: 28.6px;
+  --kicker1-line-height: 28.6px;
 
   /* Semantic - Typography - LineHeight - Label */
-  --label3-line-height: 14.399999618530273;
+  --label3-line-height: 14.4px;
   /**
    * This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
    */
-  --label1-line-height: 20.399999618530273;
-  --label1-responsive-line-height: 18;
-  --label2-line-height: 19.200000762939453;
-  --label4-line-height: 10;
+  --label1-line-height: 20.4px;
+  --label1-responsive-line-height: 18px;
+  --label2-line-height: 19.2px;
+  --label4-line-height: 10px;
 
   /* Semantic - Typography - LineHeight - Display */
-  --display1-line-height: 72;
-  --display2-line-height: 42;
-  --display3-line-height: 32;
+  --display1-line-height: 72px;
+  --display2-line-height: 42px;
+  --display3-line-height: 32px;
 
   /* Semantic - Typography - LineHeight - Title */
-  --title1-line-height: 30.799999237060547;
+  --title1-line-height: 30.8px;
   /**
    * html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg)
    */
-  --title2-line-height: 23.399999618530273;
+  --title2-line-height: 23.4px;
 
   /* Semantic - Typography - LineHeight - Quote */
   /**
    * This variable is used in the quote text style line height parameter.
    */
-  --quote-line-height: 23.399999618530273;
+  --quote-line-height: 23.4px;
 
   /* Semantic - Typography - LineHeight - Footnote */
-  --footnote1-line-height: 17.030000686645508;
-  --footnote2-line-height: 13;
+  --footnote1-line-height: 17.03px;
+  --footnote2-line-height: 13px;
 
   /* Semantic - Typography - LineHeight - Headline */
-  --headline1-line-height: 69;
-  --headline2-line-height: 50.599998474121094;
-  --headline3-line-height: 34.5;
-  --headline4-line-height: 28.600000381469727;
+  --headline1-line-height: 69px;
+  --headline2-line-height: 50.6px;
+  --headline3-line-height: 34.5px;
+  --headline4-line-height: 28.6px;
 
   /* Semantic - Typography - LineHeight - Callout */
-  --callout-line-height: 31.200000762939453;
+  --callout-line-height: 31.2px;
 
   /* Semantic - Typography - LineHeight - Subheadline */
-  --subheadline1-line-height: 28.600000381469727;
+  --subheadline1-line-height: 28.6px;
 
   /* 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.
    */
-  --letter-spacing-positive-sm: 0.5;
+  --letter-spacing-positive-sm: 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.
    */
-  --letter-spacing-positive-lg: 2;
+  --letter-spacing-positive-lg: 2px;
   /**
    * 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.
    */
-  --letter-spacing-positive-md: 1;
+  --letter-spacing-positive-md: 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.
    */
-  --letter-spacing-none: 0;
+  --letter-spacing-none: 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.
    */
-  --letter-spacing-negative-sm: -0.25;
+  --letter-spacing-negative-sm: -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.
    */
-  --letter-spacing-negative-md: -1;
+  --letter-spacing-negative-md: -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.
    */
-  --letter-spacing-negative-lg: -2;
+  --letter-spacing-negative-lg: -2px;
   /**
    * -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.
    */
-  --letter-spacing-negative-xs: -0.25;
+  --letter-spacing-negative-xs: -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.
    */
-  --letter-spacing-positive-xs: 0.25;
+  --letter-spacing-positive-xs: 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.
    */
-  --display1-letter-spacing: -1;
+  --display1-letter-spacing: -1px;
   /**
    * -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices.
    */
-  --display2-letter-spacing: -1;
+  --display2-letter-spacing: -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.
    */
-  --display3-letter-spacing: -1;
+  --display3-letter-spacing: -1px;
 
   /* Semantic - Border - BorderRadius */
   /**
    * 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
    */
-  --border-radius-xs: 2;
+  --border-radius-xs: 2px;
   /**
    * 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements.
    */
-  --border-radius-md: 8;
+  --border-radius-md: 8px;
   /**
    * 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls.
    */
-  --border-radius-sm: 4;
+  --border-radius-sm: 4px;
   /**
    * 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components.
    */
-  --border-radius-xl: 24;
+  --border-radius-xl: 24px;
   /**
    * 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces.
    */
-  --border-radius-lg: 16;
+  --border-radius-lg: 16px;
   /**
    * 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements.
    */
-  --border-radius-none: 0;
+  --border-radius-none: 0px;
   /**
    * creates fully rounded shapes, typically used for circular elements like avatars.
    */
-  --border-radius-full: 9999;
+  --border-radius-full: 9999px;
 
   /* Semantic - Border - BorderWidth */
   /**
    * 1-1-1-1 – use for subtle outlines and dividers
    */
-  --border-width-thin: 1;
+  --border-width-thin: 1px;
   /**
    * 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active)
    */
-  --border-width-thick: 2;
+  --border-width-thick: 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.
    */
-  --border-width-hairline: 0.33000001311302185;
+  --border-width-hairline: 0.33px;
 
   /* Semantic - Visibility - Boolean */
   /**
@@ -478,273 +478,273 @@
   /**
    * 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
    */
-  --inline-space-resp-sm: 12;
+  --inline-space-resp-sm: 12px;
   /**
    * 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints
    */
-  --inline-space-resp-md: 16;
+  --inline-space-resp-md: 16px;
   /**
    * 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
    */
-  --inline-space-resp-lg: 24;
+  --inline-space-resp-lg: 24px;
   /**
    * 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
    */
-  --inline-space-resp2-xl: 48;
+  --inline-space-resp2-xl: 48px;
   /**
    * 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints
    */
-  --inline-space-resp-xl: 32;
+  --inline-space-resp-xl: 32px;
 
   /* Semantic - Space - Inline - Constant */
   /**
    * 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const-sm: 8;
+  --inline-space-const-sm: 8px;
   /**
    * 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const-md: 12;
+  --inline-space-const-md: 12px;
   /**
    * 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const-lg: 16;
+  --inline-space-const-lg: 16px;
   /**
    * 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const2-xl: 32;
+  --inline-space-const2-xl: 32px;
   /**
    * 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const-xl: 24;
+  --inline-space-const-xl: 24px;
   /**
    * 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const-xs: 6;
+  --inline-space-const-xs: 6px;
   /**
    * 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const3-xs: 2;
+  --inline-space-const3-xs: 2px;
   /**
    * 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements
    */
-  --inline-space-const2-xs: 4;
+  --inline-space-const2-xs: 4px;
 
   /* Semantic - Space - Stack - Responsive */
   /**
    * 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
    */
-  --stack-space-resp-md: 16;
+  --stack-space-resp-md: 16px;
   /**
    * 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
    */
-  --stack-space-resp-lg: 24;
+  --stack-space-resp-lg: 24px;
   /**
    * 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
    */
-  --stack-space-resp2-xl: 48;
+  --stack-space-resp2-xl: 48px;
   /**
    * 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
    */
-  --stack-space-resp-sm: 12;
+  --stack-space-resp-sm: 12px;
   /**
    * 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
    */
-  --stack-space-resp-xl: 32;
+  --stack-space-resp-xl: 32px;
 
   /* Semantic - Space - Stack - Constant */
   /**
    * 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const-sm: 8;
+  --stack-space-const-sm: 8px;
   /**
    * 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const-md: 12;
+  --stack-space-const-md: 12px;
   /**
    * 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const-lg: 16;
+  --stack-space-const-lg: 16px;
   /**
    * 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const2-xl: 32;
+  --stack-space-const2-xl: 32px;
   /**
    * 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const-xl: 24;
+  --stack-space-const-xl: 24px;
   /**
    * 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const-xs: 6;
+  --stack-space-const-xs: 6px;
   /**
    * 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const3-xs: 2;
+  --stack-space-const3-xs: 2px;
   /**
    * 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
    */
-  --stack-space-const2-xs: 4;
+  --stack-space-const2-xs: 4px;
 
   /* Semantic - Space - Gap - Responsive */
   /**
    * 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp-xs: 6;
+  --gap-space-resp-xs: 6px;
   /**
    * 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp-lg: 24;
+  --gap-space-resp-lg: 24px;
   /**
    * 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp-xl: 32;
+  --gap-space-resp-xl: 32px;
   /**
    * 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp2-xl: 48;
+  --gap-space-resp2-xl: 48px;
   /**
    * 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp-md: 16;
+  --gap-space-resp-md: 16px;
   /**
    * 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp-sm: 12;
+  --gap-space-resp-sm: 12px;
   /**
    * 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp2-xs: 4;
+  --gap-space-resp2-xs: 4px;
   /**
    * 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints
    */
-  --gap-space-resp3-xl: 72;
+  --gap-space-resp3-xl: 72px;
 
   /* Semantic - Space - Gap - Constant */
   /**
    * 2-2-2-2 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const2-xs: 2;
+  --gap-space-const2-xs: 2px;
   /**
    * 4-4-4-4 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const-xs: 4;
+  --gap-space-const-xs: 4px;
   /**
    * 8-8-8-8 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const-sm: 8;
+  --gap-space-const-sm: 8px;
   /**
    * 12-12-12-12 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const-md: 12;
+  --gap-space-const-md: 12px;
   /**
    * 16-16-16-16 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const-lg: 16;
+  --gap-space-const-lg: 16px;
   /**
    * 24-24-24-24 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const-xl: 24;
+  --gap-space-const-xl: 24px;
   /**
    * 32-32-32-32 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const2-xl: 32;
+  --gap-space-const2-xl: 32px;
   /**
    * 48-48-48-48 – Use for fixed gaps between items inside of UI elements
    */
-  --gap-space-const3-xl: 48;
+  --gap-space-const3-xl: 48px;
 
   /* Semantic - Size - Constant */
   /**
    * 16-16-16-16 – Use for setting fixed height and width of UI elements
    */
-  --size-const3-xs: 16;
+  --size-const3-xs: 16px;
   /**
    * 24-24-24-24 – Use for setting fixed height and width of UI elements
    */
-  --size-const2-xs: 24;
+  --size-const2-xs: 24px;
   /**
    * 32-32-32-32 – Use for setting fixed height and width of UI elements
    */
-  --size-const-xs: 32;
+  --size-const-xs: 32px;
   /**
    * 40-40-40-40 – Use for setting fixed height and width of UI elements
    */
-  --size-const-sm: 40;
+  --size-const-sm: 40px;
   /**
    * 48-48-48-48 Use for setting fixed height and width of UI elements
    */
-  --size-const-md: 48;
+  --size-const-md: 48px;
   /**
    * 56-56-56-56 – Use for setting fixed height and width of UI elements
    */
-  --size-const-lg: 56;
+  --size-const-lg: 56px;
   /**
    * 64-64-64-64 – Use for setting fixed height and width of UI elements
    */
-  --size-const-xl: 64;
+  --size-const-xl: 64px;
   /**
    * 96-96-96-96 – Use for setting fixed height and width of UI elements
    */
-  --size-const3-xl: 96;
+  --size-const3-xl: 96px;
   /**
    * 148-148-148-148 – Use for setting fixed height and width of UI elements
    */
-  --size-const4-xl: 148;
+  --size-const4-xl: 148px;
   /**
    * 72-72-72-72 – Use for setting fixed height and width of UI elements
    */
-  --size-const2-xl: 72;
+  --size-const2-xl: 72px;
   /**
    * 8-8-8-8 – Use for setting fixed height and width of UI elements
    */
-  --size-const4-xs: 8;
+  --size-const4-xs: 8px;
 
   /* Semantic - Size - Responsive */
   /**
    * 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp3-xs: 16;
+  --size-resp3-xs: 16px;
   /**
    * 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp2-xs: 32;
+  --size-resp2-xs: 32px;
   /**
    * 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp-xs: 40;
+  --size-resp-xs: 40px;
   /**
    * 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp-sm: 48;
+  --size-resp-sm: 48px;
   /**
    * 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp-md: 64;
+  --size-resp-md: 64px;
   /**
    * 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp-lg: 72;
+  --size-resp-lg: 72px;
   /**
    * 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp-xl: 80;
+  --size-resp-xl: 80px;
   /**
    * 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp2-xl: 92;
+  --size-resp2-xl: 92px;
   /**
    * 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp3-xl: 120;
+  --size-resp3-xl: 120px;
   /**
    * 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp4-xl: 160;
+  --size-resp4-xl: 160px;
   /**
    * 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints
    */
-  --size-resp4-xs: 14;
+  --size-resp4-xs: 14px;
 
 
   /* ============================================